select.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import Field, { getValidationRules } from './_field';
  2. import Dropdown from 'app/ui/atoms/dropdown'
  3. import { Row } from 'app/design/view'
  4. import { NeoButton } from 'app/design/controls'
  5. import { useFormField } from 'app/lib/form/use-form-field';
  6. export default function FormFieldSelect(props) {
  7. const { field, readOnly } = useFormField(props, {
  8. rules: getValidationRules(props),
  9. });
  10. const setValueF = (val) => {
  11. field.onChange(val);
  12. if (props.onChange) {
  13. props.onChange(val);
  14. }
  15. };
  16. const values = getVisibilityValues(props.values);
  17. if (props.mode == 'buttons') {
  18. return (
  19. <Field {...props}>
  20. <Row className="gap-x-2">
  21. {values.map((item) => (
  22. <NeoButton
  23. key={item.value}
  24. selected={field.value == item.value}
  25. label={item.label}
  26. onPress={() => {
  27. setValueF(item.value);
  28. }}
  29. />
  30. ))}
  31. </Row>
  32. </Field>
  33. );
  34. }
  35. return (
  36. <Field {...props}>
  37. <Dropdown
  38. disabled={readOnly || props.type == 'value'}
  39. labelField="label"
  40. valueField="value"
  41. onChange={setValueF}
  42. value={field.value}
  43. data={values}
  44. size={props.size}
  45. />
  46. </Field>
  47. );
  48. }
  49. export function getVisibilityValues(valuesIn){
  50. if (valuesIn == null) {
  51. return [];
  52. }
  53. let values = [];
  54. if (!Array.isArray(valuesIn)){
  55. values = Object.keys(valuesIn).map(function (key) {
  56. if (typeof valuesIn[key] == 'string')
  57. return {label: valuesIn[key], value: key}
  58. else{
  59. return {label: valuesIn[key].value, value: valuesIn[key].key, icon: valuesIn[key].icon}
  60. }
  61. });
  62. }
  63. if (Array.isArray(valuesIn)){
  64. values = valuesIn.map(function (key) {
  65. if (typeof key == 'string'){
  66. return {label: key, value: key};
  67. }
  68. else{
  69. return key.value ? {label: key.value, value: key.key, icon: key.icon} : null
  70. }
  71. });
  72. values = values.filter(Boolean);
  73. }
  74. return values;
  75. }