react-native-exp-fig 0.1.39 → 0.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/lib/commonjs/components/modal-create-activitie/index.js +8 -6
  2. package/lib/commonjs/components/modal-create-activitie/index.js.map +1 -1
  3. package/lib/commonjs/components/modal-create-activitie/interface.js.map +1 -1
  4. package/lib/commonjs/components/selects/select-option/index.js +8 -6
  5. package/lib/commonjs/components/selects/select-option/index.js.map +1 -1
  6. package/lib/commonjs/components/selects/select-option/interface.d.js.map +1 -1
  7. package/lib/commonjs/stories/modal-create-activitie/modal-create-activitie.stories.js +4 -0
  8. package/lib/commonjs/stories/modal-create-activitie/modal-create-activitie.stories.js.map +1 -1
  9. package/lib/commonjs/stories/modal-journey-rectification/modal-journey-rectification.stories.js +35 -23
  10. package/lib/commonjs/stories/modal-journey-rectification/modal-journey-rectification.stories.js.map +1 -1
  11. package/lib/module/components/modal-create-activitie/index.js +8 -6
  12. package/lib/module/components/modal-create-activitie/index.js.map +1 -1
  13. package/lib/module/components/modal-create-activitie/interface.js.map +1 -1
  14. package/lib/module/components/selects/select-option/index.js +8 -6
  15. package/lib/module/components/selects/select-option/index.js.map +1 -1
  16. package/lib/module/components/selects/select-option/interface.d.js.map +1 -1
  17. package/lib/module/stories/modal-create-activitie/modal-create-activitie.stories.js +4 -0
  18. package/lib/module/stories/modal-create-activitie/modal-create-activitie.stories.js.map +1 -1
  19. package/lib/module/stories/modal-journey-rectification/modal-journey-rectification.stories.js +35 -23
  20. package/lib/module/stories/modal-journey-rectification/modal-journey-rectification.stories.js.map +1 -1
  21. package/lib/typescript/src/components/modal-create-activitie/interface.d.ts +1 -0
  22. package/package.json +1 -1
  23. package/src/components/modal-create-activitie/index.tsx +5 -4
  24. package/src/components/modal-create-activitie/interface.ts +1 -0
  25. package/src/components/selects/select-option/index.tsx +14 -5
  26. package/src/components/selects/select-option/interface.d.ts +1 -0
  27. package/src/stories/modal-create-activitie/modal-create-activitie.stories.tsx +4 -0
  28. package/src/stories/modal-journey-rectification/modal-journey-rectification.stories.tsx +170 -161
@@ -16,22 +16,24 @@ import { asBaseComponent } from "../../../@types/as-base-component";
16
16
  import { styles } from "./styles";
17
17
  import { theme } from "../../../styles/theme/theme";
18
18
  const SelectOption = /*#__PURE__*/forwardRef((props, ref) => {
19
- var _dataOption$, _dataOption$find;
19
+ var _dataOption$find;
20
20
  const {
21
21
  dataOption,
22
22
  handleSelectDown,
23
23
  titleLabel,
24
24
  sizeTitleLabel,
25
25
  colortitleLabel,
26
- backgroundColor
26
+ backgroundColor,
27
+ selectedValueID = null
27
28
  } = props;
28
- const [selectedValue, setSelectedValue] = useState(((_dataOption$ = dataOption[0]) === null || _dataOption$ === void 0 ? void 0 : _dataOption$.value) || "");
29
+ const [selectedValue, setSelectedValue] = useState(selectedValueID);
29
30
  const [modalVisible, setModalVisible] = useState(false);
30
31
  const handleSelect = value => {
31
32
  setSelectedValue(value);
32
33
  setModalVisible(false);
33
34
  handleSelectDown(value);
34
35
  };
36
+ const itemLabelSelected = (_dataOption$find = dataOption.find(item => item.value === selectedValue)) === null || _dataOption$find === void 0 ? void 0 : _dataOption$find.label;
35
37
  const styleProps = {
36
38
  dataOption,
37
39
  handleSelectDown,
@@ -52,10 +54,10 @@ const SelectOption = /*#__PURE__*/forwardRef((props, ref) => {
52
54
  }, /*#__PURE__*/React.createElement(Text, {
53
55
  style: styles(styleProps).selectedText,
54
56
  numberOfLines: 1
55
- }, `${handleLimitTextdisplayByAmount({
57
+ }, itemLabelSelected ? /*#__PURE__*/React.createElement(React.Fragment, null, " ", `${handleLimitTextdisplayByAmount({
56
58
  limit: 42,
57
- text: (_dataOption$find = dataOption.find(item => item.value === selectedValue)) === null || _dataOption$find === void 0 ? void 0 : _dataOption$find.label
58
- })}`), /*#__PURE__*/React.createElement(Icons, {
59
+ text: itemLabelSelected
60
+ })}`) : "Selecione uma opção"), /*#__PURE__*/React.createElement(Icons, {
59
61
  size: theme.fontSizes["xs"],
60
62
  color: theme.colors.blue[500],
61
63
  icon: "ARROW_DROP_DOWN"
@@ -1 +1 @@
1
- {"version":3,"names":["React","forwardRef","useState","View","Text","TouchableOpacity","Modal","FlatList","Icons","handleLimitTextdisplayByAmount","asBaseComponent","styles","theme","SelectOption","props","ref","_dataOption$","_dataOption$find","dataOption","handleSelectDown","titleLabel","sizeTitleLabel","colortitleLabel","backgroundColor","selectedValue","setSelectedValue","value","modalVisible","setModalVisible","handleSelect","styleProps","createElement","style","container","label","testID","selectBox","onPress","selectedText","numberOfLines","limit","text","find","item","size","fontSizes","color","colors","blue","icon","visible","transparent","animationType","modalOverlay","modalContainer","width","alignItems","height","paddingRight","justifyContent","data","keyExtractor","renderItem","option","optionText"],"sources":["index.tsx"],"sourcesContent":["/**\n * IMPORTS\n */\nimport React, { forwardRef, useState } from \"react\";\nimport { View, Text, TouchableOpacity, Modal, FlatList } from \"react-native\";\n\n// commons / svg\nimport { Icons } from \"../../../common/icons-svg\";\n\n// utils\nimport { handleLimitTextdisplayByAmount } from \"../../../utils/text-limit\";\n\n// typings\nimport { asBaseComponent } from \"../../../@types/as-base-component\";\nimport type { ISelectDropDownProps } from \"./interface\";\n\n// styles\nimport { styles } from \"./styles\";\nimport { theme } from \"../../../styles/theme/theme\";\n\nconst SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {\n const {\n dataOption,\n handleSelectDown,\n titleLabel,\n sizeTitleLabel,\n colortitleLabel,\n backgroundColor,\n } = props;\n\n const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || \"\");\n const [modalVisible, setModalVisible] = useState(false);\n\n const handleSelect = (value: number) => {\n setSelectedValue(value);\n setModalVisible(false);\n handleSelectDown(value);\n };\n\n const styleProps = {\n dataOption,\n handleSelectDown,\n titleLabel,\n sizeTitleLabel,\n colortitleLabel,\n backgroundColor,\n } as ISelectDropDownProps;\n return (\n <View ref={ref} style={styles(styleProps).container}>\n {/* Titulo para exibir o label */}\n <Text style={styles(styleProps).label}>{`${titleLabel ?? \"Selecione uma opção\"}`}:</Text>\n\n {/* Botão para abrir o modal */}\n <TouchableOpacity\n testID=\"select-box\"\n style={styles(styleProps).selectBox}\n onPress={() => setModalVisible(true)}\n >\n <Text style={styles(styleProps).selectedText} numberOfLines={1}>\n {`${handleLimitTextdisplayByAmount({\n limit: 42,\n text: dataOption.find((item) => item.value === selectedValue)?.label!,\n })}`}\n </Text>\n\n <Icons\n size={theme.fontSizes[\"xs\"]}\n color={theme.colors.blue[500]}\n icon={\"ARROW_DROP_DOWN\"}\n />\n </TouchableOpacity>\n\n {/* Modal para exibir as opções */}\n <Modal testID=\"modal-container\" visible={modalVisible} transparent animationType=\"fade\">\n <View style={styles(styleProps).modalOverlay}>\n <View style={styles(styleProps).modalContainer}>\n <View\n style={{\n width: \"100%\",\n alignItems: \"flex-end\",\n height: 40,\n paddingRight: 8,\n }}\n >\n <TouchableOpacity\n testID=\"close-icon\"\n onPress={() => setModalVisible(false)}\n style={{\n width: 40,\n height: 45,\n alignItems: \"center\",\n justifyContent: \"center\",\n }}\n >\n <Icons\n size={theme.fontSizes[\"md\"]}\n color={theme.colors.blue[500]}\n icon={\"CLOSED\"}\n />\n </TouchableOpacity>\n </View>\n <FlatList\n data={dataOption || []}\n keyExtractor={(item) => item.value}\n renderItem={({ item }) => (\n <TouchableOpacity\n style={styles(styleProps).option}\n onPress={() => handleSelect(item.value)}\n >\n <Text style={styles(styleProps).optionText}>{item.label}</Text>\n </TouchableOpacity>\n )}\n />\n </View>\n </View>\n </Modal>\n </View>\n );\n});\n\n/**\n * Componente SelectOption para a interação da ui.\n */\nexport default asBaseComponent(SelectOption);\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","forwardRef","useState","View","Text","TouchableOpacity","Modal","FlatList","Icons","handleLimitTextdisplayByAmount","asBaseComponent","styles","theme","SelectOption","props","ref","_dataOption$find","dataOption","handleSelectDown","titleLabel","sizeTitleLabel","colortitleLabel","backgroundColor","selectedValueID","selectedValue","setSelectedValue","modalVisible","setModalVisible","handleSelect","value","itemLabelSelected","find","item","label","styleProps","createElement","style","container","testID","selectBox","onPress","selectedText","numberOfLines","Fragment","limit","text","size","fontSizes","color","colors","blue","icon","visible","transparent","animationType","modalOverlay","modalContainer","width","alignItems","height","paddingRight","justifyContent","data","keyExtractor","renderItem","option","optionText"],"sources":["index.tsx"],"sourcesContent":["/**\n * IMPORTS\n */\nimport React, { forwardRef, useState } from \"react\";\nimport { View, Text, TouchableOpacity, Modal, FlatList } from \"react-native\";\n\n// commons / svg\nimport { Icons } from \"../../../common/icons-svg\";\n\n// utils\nimport { handleLimitTextdisplayByAmount } from \"../../../utils/text-limit\";\n\n// typings\nimport { asBaseComponent } from \"../../../@types/as-base-component\";\nimport type { ISelectDropDownProps } from \"./interface\";\n\n// styles\nimport { styles } from \"./styles\";\nimport { theme } from \"../../../styles/theme/theme\";\n\nconst SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {\n const {\n dataOption,\n handleSelectDown,\n titleLabel,\n sizeTitleLabel,\n colortitleLabel,\n backgroundColor,\n selectedValueID = null,\n } = props;\n\n const [selectedValue, setSelectedValue] = useState<number | null>(selectedValueID);\n const [modalVisible, setModalVisible] = useState(false);\n\n const handleSelect = (value: number) => {\n setSelectedValue(value);\n setModalVisible(false);\n handleSelectDown(value);\n };\n\n const itemLabelSelected = dataOption.find((item) => item.value === selectedValue)?.label!;\n const styleProps = {\n dataOption,\n handleSelectDown,\n titleLabel,\n sizeTitleLabel,\n colortitleLabel,\n backgroundColor,\n } as ISelectDropDownProps;\n return (\n <View ref={ref} style={styles(styleProps).container}>\n {/* Titulo para exibir o label */}\n <Text style={styles(styleProps).label}>{`${titleLabel ?? \"Selecione uma opção\"}`}:</Text>\n\n {/* Botão para abrir o modal */}\n <TouchableOpacity\n testID=\"select-box\"\n style={styles(styleProps).selectBox}\n onPress={() => setModalVisible(true)}\n >\n <Text style={styles(styleProps).selectedText} numberOfLines={1}>\n {itemLabelSelected ? (\n <>\n {\" \"}\n {`${handleLimitTextdisplayByAmount({\n limit: 42,\n text: itemLabelSelected,\n })}`}\n </>\n ) : (\n \"Selecione uma opção\"\n )}\n </Text>\n\n <Icons\n size={theme.fontSizes[\"xs\"]}\n color={theme.colors.blue[500]}\n icon={\"ARROW_DROP_DOWN\"}\n />\n </TouchableOpacity>\n\n {/* Modal para exibir as opções */}\n <Modal testID=\"modal-container\" visible={modalVisible} transparent animationType=\"fade\">\n <View style={styles(styleProps).modalOverlay}>\n <View style={styles(styleProps).modalContainer}>\n <View\n style={{\n width: \"100%\",\n alignItems: \"flex-end\",\n height: 40,\n paddingRight: 8,\n }}\n >\n <TouchableOpacity\n testID=\"close-icon\"\n onPress={() => setModalVisible(false)}\n style={{\n width: 40,\n height: 45,\n alignItems: \"center\",\n justifyContent: \"center\",\n }}\n >\n <Icons\n size={theme.fontSizes[\"md\"]}\n color={theme.colors.blue[500]}\n icon={\"CLOSED\"}\n />\n </TouchableOpacity>\n </View>\n <FlatList\n data={dataOption || []}\n keyExtractor={(item) => item.value}\n renderItem={({ item }) => (\n <TouchableOpacity\n style={styles(styleProps).option}\n onPress={() => handleSelect(item.value)}\n >\n <Text style={styles(styleProps).optionText}>{item.label}</Text>\n </TouchableOpacity>\n )}\n />\n </View>\n </View>\n </Modal>\n </View>\n );\n});\n\n/**\n * Componente SelectOption para a interação da ui.\n */\nexport default asBaseComponent(SelectOption);\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["interface.d.ts"],"sourcesContent":["/**\n * IMPORTS\n */\ntype ISelectDropDownProps = {\n dataOption: any[];\n titleLabel: string;\n sizeTitleLabel?: number;\n colortitleLabel?: string;\n backgroundColor?: string;\n /**retorna o valor selecionado */\n // eslint-disable-next-line no-unused-vars\n handleSelectDown: (value: number) => void;\n};\n\n/**\n * EXPORTS\n */\nexport { ISelectDropDownProps };\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["interface.d.ts"],"sourcesContent":["/**\n * IMPORTS\n */\ntype ISelectDropDownProps = {\n dataOption: any[];\n titleLabel: string;\n sizeTitleLabel?: number;\n colortitleLabel?: string;\n backgroundColor?: string;\n selectedValueID?: number | null;\n /**retorna o valor selecionado */\n // eslint-disable-next-line no-unused-vars\n handleSelectDown: (value: number) => void;\n};\n\n/**\n * EXPORTS\n */\nexport { ISelectDropDownProps };\n"],"mappings":"","ignoreList":[]}
@@ -74,6 +74,10 @@ export const Aberto = {
74
74
  args: {
75
75
  visible: true,
76
76
  textTitle: "Incluir atividade",
77
+ optionSelected: {
78
+ value: 22,
79
+ label: "Em operação - Carregamento"
80
+ },
77
81
  onPressConfirm: payload => {
78
82
  console.log("payload", payload);
79
83
  }
@@ -1 +1 @@
1
- {"version":3,"names":["React","ModalCreteActivitie","meta","title","component","args","visible","textTitle","argTypes","onClose","action","onPressConfirm","control","description","parameters","docs","Playground","render","createElement","Fechado","Aberto","payload","console","log"],"sources":["modal-create-activitie.stories.tsx"],"sourcesContent":["/* eslint-disable no-undef */\n/**\n * IMPORTS\n */\nimport React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\n// component\nimport ModalCreteActivitie from \"../../components/modal-create-activitie\";\n\n// utils / types\ntype Props = React.ComponentProps<typeof ModalCreteActivitie>;\n\nconst meta: Meta<typeof ModalCreteActivitie> = {\n title: \"Componente/ModalCreteActivitie\",\n component: ModalCreteActivitie,\n args: {\n visible: false,\n textTitle: \"Incluir atividade\",\n },\n argTypes: {\n onClose: { action: \"onClose\" },\n onPressConfirm: { action: \"onPressConfirm\" },\n textTitle: {\n control: \"text\",\n description: \"Título exibido no cabeçalho do modal\",\n },\n visible: {\n control: \"boolean\",\n description: \"Controla a visibilidade do modal\",\n },\n },\n parameters: {\n docs: {\n description: {\n component: `\n### ModalCreteActivitie\nModal para incluir uma atividade com motivo, data e hora.\n\n#### Uso\n\\`\\`\\`tsx\n<ModalCreteActivitie\n visible={visible}\n onClose={() => {}}\n onPressConfirm={(payload) => {}}\n textTitle=\"Incluir atividade\"\n/>\n\\`\\`\\`\n\n- \\`visible\\`: abre/fecha o modal\n- \\`onClose\\`: chamado ao cancelar/fechar\n- \\`onPressConfirm\\`: retorna { reasonValue, label, dateAndHours }\n- \\`textTitle\\`: título opcional\n `,\n },\n },\n },\n} as Meta<typeof ModalCreteActivitie>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof ModalCreteActivitie>;\n\n/**\n * Apenas controla via Controls (visible true/false no painel do Storybook).\n * Evita Template com \"args: any\" e mantém tipagem estrita.\n */\nexport const Playground: Story = {\n render: (args: Props) => <ModalCreteActivitie {...args} />,\n};\n\nexport const Fechado: Story = {\n args: {\n visible: false,\n },\n};\n\nexport const Aberto: Story = {\n args: {\n visible: true,\n textTitle: \"Incluir atividade\",\n onPressConfirm: (payload) => {\n console.log(\"payload\", payload);\n },\n },\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAGzB;AACA,OAAOC,mBAAmB,MAAM,yCAAyC;;AAEzE;;AAGA,MAAMC,IAAsC,GAAG;EAC7CC,KAAK,EAAE,gCAAgC;EACvCC,SAAS,EAAEH,mBAAmB;EAC9BI,IAAI,EAAE;IACJC,OAAO,EAAE,KAAK;IACdC,SAAS,EAAE;EACb,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MAAEC,MAAM,EAAE;IAAU,CAAC;IAC9BC,cAAc,EAAE;MAAED,MAAM,EAAE;IAAiB,CAAC;IAC5CH,SAAS,EAAE;MACTK,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;IACf,CAAC;IACDP,OAAO,EAAE;MACPM,OAAO,EAAE,SAAS;MAClBC,WAAW,EAAE;IACf;EACF,CAAC;EACDC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJF,WAAW,EAAE;QACXT,SAAS,EAAE;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACM;IACF;EACF;AACF,CAAqC;AAErC,eAAeF,IAAI;AAInB;AACA;AACA;AACA;AACA,OAAO,MAAMc,UAAiB,GAAG;EAC/BC,MAAM,EAAGZ,IAAW,iBAAKL,KAAA,CAAAkB,aAAA,CAACjB,mBAAmB,EAAKI,IAAO;AAC3D,CAAC;AAED,OAAO,MAAMc,OAAc,GAAG;EAC5Bd,IAAI,EAAE;IACJC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,MAAMc,MAAa,GAAG;EAC3Bf,IAAI,EAAE;IACJC,OAAO,EAAE,IAAI;IACbC,SAAS,EAAE,mBAAmB;IAC9BI,cAAc,EAAGU,OAAO,IAAK;MAC3BC,OAAO,CAACC,GAAG,CAAC,SAAS,EAAEF,OAAO,CAAC;IACjC;EACF;AACF,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","ModalCreteActivitie","meta","title","component","args","visible","textTitle","argTypes","onClose","action","onPressConfirm","control","description","parameters","docs","Playground","render","createElement","Fechado","Aberto","optionSelected","value","label","payload","console","log"],"sources":["modal-create-activitie.stories.tsx"],"sourcesContent":["/* eslint-disable no-undef */\n/**\n * IMPORTS\n */\nimport React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\n// component\nimport ModalCreteActivitie from \"../../components/modal-create-activitie\";\n\n// utils / types\ntype Props = React.ComponentProps<typeof ModalCreteActivitie>;\n\nconst meta: Meta<typeof ModalCreteActivitie> = {\n title: \"Componente/ModalCreteActivitie\",\n component: ModalCreteActivitie,\n args: {\n visible: false,\n textTitle: \"Incluir atividade\",\n },\n argTypes: {\n onClose: { action: \"onClose\" },\n onPressConfirm: { action: \"onPressConfirm\" },\n textTitle: {\n control: \"text\",\n description: \"Título exibido no cabeçalho do modal\",\n },\n visible: {\n control: \"boolean\",\n description: \"Controla a visibilidade do modal\",\n },\n },\n parameters: {\n docs: {\n description: {\n component: `\n### ModalCreteActivitie\nModal para incluir uma atividade com motivo, data e hora.\n\n#### Uso\n\\`\\`\\`tsx\n<ModalCreteActivitie\n visible={visible}\n onClose={() => {}}\n onPressConfirm={(payload) => {}}\n textTitle=\"Incluir atividade\"\n/>\n\\`\\`\\`\n\n- \\`visible\\`: abre/fecha o modal\n- \\`onClose\\`: chamado ao cancelar/fechar\n- \\`onPressConfirm\\`: retorna { reasonValue, label, dateAndHours }\n- \\`textTitle\\`: título opcional\n `,\n },\n },\n },\n} as Meta<typeof ModalCreteActivitie>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof ModalCreteActivitie>;\n\n/**\n * Apenas controla via Controls (visible true/false no painel do Storybook).\n * Evita Template com \"args: any\" e mantém tipagem estrita.\n */\nexport const Playground: Story = {\n render: (args: Props) => <ModalCreteActivitie {...args} />,\n};\n\nexport const Fechado: Story = {\n args: {\n visible: false,\n },\n};\n\nexport const Aberto: Story = {\n args: {\n visible: true,\n textTitle: \"Incluir atividade\",\n optionSelected: {\n value: 22,\n label: \"Em operação - Carregamento\",\n },\n onPressConfirm: (payload) => {\n console.log(\"payload\", payload);\n },\n },\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAGzB;AACA,OAAOC,mBAAmB,MAAM,yCAAyC;;AAEzE;;AAGA,MAAMC,IAAsC,GAAG;EAC7CC,KAAK,EAAE,gCAAgC;EACvCC,SAAS,EAAEH,mBAAmB;EAC9BI,IAAI,EAAE;IACJC,OAAO,EAAE,KAAK;IACdC,SAAS,EAAE;EACb,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MAAEC,MAAM,EAAE;IAAU,CAAC;IAC9BC,cAAc,EAAE;MAAED,MAAM,EAAE;IAAiB,CAAC;IAC5CH,SAAS,EAAE;MACTK,OAAO,EAAE,MAAM;MACfC,WAAW,EAAE;IACf,CAAC;IACDP,OAAO,EAAE;MACPM,OAAO,EAAE,SAAS;MAClBC,WAAW,EAAE;IACf;EACF,CAAC;EACDC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJF,WAAW,EAAE;QACXT,SAAS,EAAE;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACM;IACF;EACF;AACF,CAAqC;AAErC,eAAeF,IAAI;AAInB;AACA;AACA;AACA;AACA,OAAO,MAAMc,UAAiB,GAAG;EAC/BC,MAAM,EAAGZ,IAAW,iBAAKL,KAAA,CAAAkB,aAAA,CAACjB,mBAAmB,EAAKI,IAAO;AAC3D,CAAC;AAED,OAAO,MAAMc,OAAc,GAAG;EAC5Bd,IAAI,EAAE;IACJC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,MAAMc,MAAa,GAAG;EAC3Bf,IAAI,EAAE;IACJC,OAAO,EAAE,IAAI;IACbC,SAAS,EAAE,mBAAmB;IAC9Bc,cAAc,EAAE;MACdC,KAAK,EAAE,EAAE;MACTC,KAAK,EAAE;IACT,CAAC;IACDZ,cAAc,EAAGa,OAAO,IAAK;MAC3BC,OAAO,CAACC,GAAG,CAAC,SAAS,EAAEF,OAAO,CAAC;IACjC;EACF;AACF,CAAC","ignoreList":[]}
@@ -1,20 +1,20 @@
1
- /**
2
- * IMPORTS (Storybook)
1
+ /**
2
+ * IMPORTS (Storybook)
3
3
  */
4
4
 
5
5
  import React from "react";
6
6
  import { View } from "react-native";
7
7
  import { action } from "@storybook/addon-actions";
8
8
 
9
- /**
10
- * IMPORTS (Componente)
11
- * Ajuste o caminho conforme sua estrutura (ex.: "../index" ou "./index").
9
+ /**
10
+ * IMPORTS (Componente)
11
+ * Ajuste o caminho conforme sua estrutura (ex.: "../index" ou "./index").
12
12
  */
13
13
  import ModalJourneyRectification from "../../components/modal-create-activitie";
14
14
 
15
- /**
16
- * DECORATORS
17
- * Envolve o story para garantir área de visualização e evitar "modal perdido".
15
+ /**
16
+ * DECORATORS
17
+ * Envolve o story para garantir área de visualização e evitar "modal perdido".
18
18
  */
19
19
  const WithViewport = ({
20
20
  children
@@ -30,8 +30,8 @@ const WithViewport = ({
30
30
  }, children);
31
31
  };
32
32
 
33
- /**
34
- * META
33
+ /**
34
+ * META
35
35
  */
36
36
  const meta = {
37
37
  title: "Componente/ModalJourneyRectification",
@@ -107,21 +107,25 @@ import ModalJourneyRectification from "caminho/do/componente";
107
107
  };
108
108
  export default meta;
109
109
 
110
- /**
111
- * STORIES
110
+ /**
111
+ * STORIES
112
112
  */
113
113
 
114
- /**
115
- * Estado padrão (fechado).
114
+ /**
115
+ * Estado padrão (fechado).
116
116
  */
117
117
  export const Default = {};
118
118
 
119
- /**
120
- * Modal visível para inspeção visual.
119
+ /**
120
+ * Modal visível para inspeção visual.
121
121
  */
122
122
  export const Opened = {
123
123
  args: {
124
- visible: true
124
+ visible: true,
125
+ optionSelected: {
126
+ value: 22,
127
+ label: "Em operação - Carregamento"
128
+ }
125
129
  },
126
130
  parameters: {
127
131
  docs: {
@@ -132,13 +136,17 @@ export const Opened = {
132
136
  }
133
137
  };
134
138
 
135
- /**
136
- * Título customizado (ex.: para variações de copy).
139
+ /**
140
+ * Título customizado (ex.: para variações de copy).
137
141
  */
138
142
  export const WithCustomTitle = {
139
143
  args: {
140
144
  visible: true,
141
- textTitle: "Registrar atividade manualmente"
145
+ textTitle: "Editar atividade",
146
+ optionSelected: {
147
+ value: 22,
148
+ label: "Em operação - Carregamento"
149
+ }
142
150
  },
143
151
  parameters: {
144
152
  docs: {
@@ -149,13 +157,17 @@ export const WithCustomTitle = {
149
157
  }
150
158
  };
151
159
 
152
- /**
153
- * Playground — ajuste livre via Controls.
160
+ /**
161
+ * Playground — ajuste livre via Controls.
154
162
  */
155
163
  export const Playground = {
156
164
  args: {
157
165
  visible: false,
158
- textTitle: "Editar atividade"
166
+ textTitle: "Editar atividade",
167
+ optionSelected: {
168
+ value: 22,
169
+ label: "Em operação - Carregamento"
170
+ }
159
171
  },
160
172
  parameters: {
161
173
  docs: {
@@ -1 +1 @@
1
- {"version":3,"names":["React","View","action","ModalJourneyRectification","WithViewport","children","createElement","style","flex","minHeight","alignItems","justifyContent","backgroundColor","meta","title","component","args","visible","textTitle","onClose","onPressConfirm","argTypes","control","type","description","table","category","parameters","layout","docs","decorators","Story","Default","Opened","story","WithCustomTitle","Playground"],"sources":["modal-journey-rectification.stories.tsx"],"sourcesContent":["/**\r\n * IMPORTS (Storybook)\r\n */\r\nimport type { Meta, StoryObj } from \"@storybook/react\";\r\nimport React from \"react\";\r\nimport { View } from \"react-native\";\r\nimport { action } from \"@storybook/addon-actions\";\r\n\r\n/**\r\n * IMPORTS (Componente)\r\n * Ajuste o caminho conforme sua estrutura (ex.: \"../index\" ou \"./index\").\r\n */\r\nimport ModalJourneyRectification from \"../../components/modal-create-activitie\";\r\n\r\n/**\r\n * DECORATORS\r\n * Envolve o story para garantir área de visualização e evitar \"modal perdido\".\r\n */\r\nconst WithViewport: React.FC<React.PropsWithChildren> = ({ children }) => {\r\n return (\r\n <View\r\n style={{\r\n flex: 1,\r\n minHeight: 600,\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#F3F4F6\", // neutro claro p/ destacar o modal\r\n }}\r\n >\r\n {children}\r\n </View>\r\n );\r\n};\r\n\r\n/**\r\n * META\r\n */\r\nconst meta: Meta<typeof ModalJourneyRectification> = {\r\n title: \"Componente/ModalJourneyRectification\",\r\n component: ModalJourneyRectification,\r\n args: {\r\n visible: false,\r\n textTitle: \"Editar atividade\",\r\n onClose: action(\"onClose\"),// ação capturada no painel \"Actions\"\r\n onPressConfirm: action(\"onPressConfirm\"), // idem\r\n },\r\n argTypes: {\r\n visible: {\r\n control: { type: \"boolean\" },\r\n description: \"Define a visibilidade do modal.\",\r\n table: { category: \"Controle\" },\r\n },\r\n textTitle: {\r\n control: { type: \"text\" },\r\n description: \"Título exibido no cabeçalho do modal.\",\r\n table: { category: \"Conteúdo\" },\r\n },\r\n onClose: {\r\n description: \"Callback ao cancelar/fechar o modal.\",\r\n table: { category: \"Eventos\" },\r\n },\r\n onPressConfirm: {\r\n description:\r\n \"Callback ao confirmar. Recebe { reasonValue, label, dateAndHours }.\",\r\n table: { category: \"Eventos\" },\r\n },\r\n },\r\n parameters: {\r\n layout: \"fullscreen\",\r\n docs: {\r\n description: {\r\n component: `\r\n### ModalJourneyRectification\r\nModal para **Editar uma atividade** (motivo + data e hora) seguindo o design do sistema.\r\n\r\n#### Uso básico\r\n\\`\\`\\`tsx\r\nimport ModalJourneyRectification from \"caminho/do/componente\";\r\n\r\n<ModalJourneyRectification\r\n visible={true}\r\n textTitle=\"Edutar atividade\"\r\n onClose={() => {/* fechar */}}\r\n onPressConfirm={(payload) => {\r\n // payload: { reasonValue, label, dateAndHours: { date, hours } }\r\n }}\r\n/>\r\n\\`\\`\\`\r\n\r\n- Ao confirmar, o componente dispara o \\`onPressConfirm\\` com os dados selecionados e **fecha** em seguida.\r\n- O clique no overlay ou o botão \"CANCELAR\" disparam \\`onClose\\`.\r\n `,\r\n },\r\n },\r\n },\r\n decorators: [(Story) => <WithViewport>{Story()}</WithViewport>],\r\n};\r\nexport default meta;\r\n\r\n/**\r\n * STORIES\r\n */\r\ntype Story = StoryObj<typeof ModalJourneyRectification>;\r\n\r\n/**\r\n * Estado padrão (fechado).\r\n */\r\nexport const Default: Story = {};\r\n\r\n/**\r\n * Modal visível para inspeção visual.\r\n */\r\nexport const Opened: Story = {\r\n args: {\r\n visible: true,\r\n },\r\n parameters: {\r\n docs: {\r\n description: {\r\n story:\r\n \"Exibe o modal aberto para validar layout, overlay e botões de ação.\",\r\n },\r\n },\r\n },\r\n};\r\n\r\n/**\r\n * Título customizado (ex.: para variações de copy).\r\n */\r\nexport const WithCustomTitle: Story = {\r\n args: {\r\n visible: true,\r\n textTitle: \"Registrar atividade manualmente\",\r\n },\r\n parameters: {\r\n docs: {\r\n description: {\r\n story:\r\n \"Permite validar a troca do título e o encaixe no cabeçalho do modal.\",\r\n },\r\n },\r\n },\r\n};\r\n\r\n/**\r\n * Playground — ajuste livre via Controls.\r\n */\r\nexport const Playground: Story = {\r\n args: {\r\n visible: false,\r\n textTitle: \"Editar atividade\",\r\n },\r\n parameters: {\r\n docs: {\r\n description: {\r\n story:\r\n \"Use os **Controls** para alternar `visible` e personalizar `textTitle`. As ações aparecem no painel *Actions*.\",\r\n },\r\n },\r\n },\r\n};"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","View","action","ModalJourneyRectification","WithViewport","children","createElement","style","flex","minHeight","alignItems","justifyContent","backgroundColor","meta","title","component","args","visible","textTitle","onClose","onPressConfirm","argTypes","control","type","description","table","category","parameters","layout","docs","decorators","Story","Default","Opened","optionSelected","value","label","story","WithCustomTitle","Playground"],"sources":["modal-journey-rectification.stories.tsx"],"sourcesContent":["/**\n * IMPORTS (Storybook)\n */\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { View } from \"react-native\";\nimport { action } from \"@storybook/addon-actions\";\n\n/**\n * IMPORTS (Componente)\n * Ajuste o caminho conforme sua estrutura (ex.: \"../index\" ou \"./index\").\n */\nimport ModalJourneyRectification from \"../../components/modal-create-activitie\";\n\n/**\n * DECORATORS\n * Envolve o story para garantir área de visualização e evitar \"modal perdido\".\n */\nconst WithViewport: React.FC<React.PropsWithChildren> = ({ children }) => {\n return (\n <View\n style={{\n flex: 1,\n minHeight: 600,\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"#F3F4F6\", // neutro claro p/ destacar o modal\n }}\n >\n {children}\n </View>\n );\n};\n\n/**\n * META\n */\nconst meta: Meta<typeof ModalJourneyRectification> = {\n title: \"Componente/ModalJourneyRectification\",\n component: ModalJourneyRectification,\n args: {\n visible: false,\n textTitle: \"Editar atividade\",\n onClose: action(\"onClose\"), // ação capturada no painel \"Actions\"\n onPressConfirm: action(\"onPressConfirm\"), // idem\n },\n argTypes: {\n visible: {\n control: { type: \"boolean\" },\n description: \"Define a visibilidade do modal.\",\n table: { category: \"Controle\" },\n },\n textTitle: {\n control: { type: \"text\" },\n description: \"Título exibido no cabeçalho do modal.\",\n table: { category: \"Conteúdo\" },\n },\n onClose: {\n description: \"Callback ao cancelar/fechar o modal.\",\n table: { category: \"Eventos\" },\n },\n onPressConfirm: {\n description: \"Callback ao confirmar. Recebe { reasonValue, label, dateAndHours }.\",\n table: { category: \"Eventos\" },\n },\n },\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n component: `\n### ModalJourneyRectification\nModal para **Editar uma atividade** (motivo + data e hora) seguindo o design do sistema.\n\n#### Uso básico\n\\`\\`\\`tsx\nimport ModalJourneyRectification from \"caminho/do/componente\";\n\n<ModalJourneyRectification\n visible={true}\n textTitle=\"Edutar atividade\"\n onClose={() => {/* fechar */}}\n onPressConfirm={(payload) => {\n // payload: { reasonValue, label, dateAndHours: { date, hours } }\n }}\n/>\n\\`\\`\\`\n\n- Ao confirmar, o componente dispara o \\`onPressConfirm\\` com os dados selecionados e **fecha** em seguida.\n- O clique no overlay ou o botão \"CANCELAR\" disparam \\`onClose\\`.\n `,\n },\n },\n },\n decorators: [(Story) => <WithViewport>{Story()}</WithViewport>],\n};\nexport default meta;\n\n/**\n * STORIES\n */\ntype Story = StoryObj<typeof ModalJourneyRectification>;\n\n/**\n * Estado padrão (fechado).\n */\nexport const Default: Story = {};\n\n/**\n * Modal visível para inspeção visual.\n */\nexport const Opened: Story = {\n args: {\n visible: true,\n optionSelected: {\n value: 22,\n label: \"Em operação - Carregamento\",\n },\n },\n parameters: {\n docs: {\n description: {\n story: \"Exibe o modal aberto para validar layout, overlay e botões de ação.\",\n },\n },\n },\n};\n\n/**\n * Título customizado (ex.: para variações de copy).\n */\nexport const WithCustomTitle: Story = {\n args: {\n visible: true,\n textTitle: \"Editar atividade\",\n optionSelected: {\n value: 22,\n label: \"Em operação - Carregamento\",\n },\n },\n parameters: {\n docs: {\n description: {\n story: \"Permite validar a troca do título e o encaixe no cabeçalho do modal.\",\n },\n },\n },\n};\n\n/**\n * Playground — ajuste livre via Controls.\n */\nexport const Playground: Story = {\n args: {\n visible: false,\n textTitle: \"Editar atividade\",\n optionSelected: {\n value: 22,\n label: \"Em operação - Carregamento\",\n },\n },\n parameters: {\n docs: {\n description: {\n story:\n \"Use os **Controls** para alternar `visible` e personalizar `textTitle`. As ações aparecem no painel *Actions*.\",\n },\n },\n },\n};\n"],"mappings":"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","ignoreList":[]}
@@ -5,6 +5,7 @@ declare type IModalCreateActivitieProps<T> = {
5
5
  visible: boolean;
6
6
  textTitle?: string;
7
7
  options?: T;
8
+ optionSelected?: any | null;
8
9
  onClose: () => void;
9
10
  onPressConfirm: (value: T) => void;
10
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-exp-fig",
3
- "version": "0.1.39",
3
+ "version": "0.1.40",
4
4
  "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -32,7 +32,7 @@ import { theme } from "../../styles/theme/theme";
32
32
  import { styles } from "./styles";
33
33
 
34
34
  const ModalCreteActivitie: React.FC<IModalCreateActivitieProps<any>> = React.memo(
35
- ({ visible, onClose, onPressConfirm, textTitle }) => {
35
+ ({ visible, onClose, onPressConfirm, textTitle, optionSelected = null }) => {
36
36
  const [dateAndHours, setDateAndHours] = useState<IDateAndHoursProps>({
37
37
  date: formatDate(new Date()),
38
38
  hours: formHoursMinute(String(new Date().getHours() * 3600 + new Date().getMinutes() * 60)),
@@ -40,7 +40,7 @@ const ModalCreteActivitie: React.FC<IModalCreateActivitieProps<any>> = React.mem
40
40
 
41
41
  // estados controlados mínimos
42
42
  const [selectedActivitie, setSelectedActivitie] = useState<number | null>(
43
- retificacaoActivities[0]?.value ?? null
43
+ optionSelected?.value ?? null
44
44
  );
45
45
 
46
46
  // label do motivo derivada com memo
@@ -123,9 +123,10 @@ const ModalCreteActivitie: React.FC<IModalCreateActivitieProps<any>> = React.mem
123
123
  />
124
124
 
125
125
  <SelectOption
126
- titleLabel="Selecione um motivo"
126
+ titleLabel="Selecione uma opção"
127
127
  sizeTitleLabel={18}
128
- dataOption={retificacaoActivities as any}
128
+ dataOption={retificacaoActivities}
129
+ selectedValueID={selectedActivitie}
129
130
  handleSelectDown={handleChangeReason}
130
131
  backgroundColor={theme.colors.neutral[300]}
131
132
  />
@@ -7,6 +7,7 @@ type IModalCreateActivitieProps<T> = {
7
7
  visible: boolean;
8
8
  textTitle?: string;
9
9
  options?: T;
10
+ optionSelected?: any | null;
10
11
  onClose: () => void;
11
12
  onPressConfirm: (value: T) => void;
12
13
  };
@@ -26,9 +26,10 @@ const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.R
26
26
  sizeTitleLabel,
27
27
  colortitleLabel,
28
28
  backgroundColor,
29
+ selectedValueID = null,
29
30
  } = props;
30
31
 
31
- const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
32
+ const [selectedValue, setSelectedValue] = useState<number | null>(selectedValueID);
32
33
  const [modalVisible, setModalVisible] = useState(false);
33
34
 
34
35
  const handleSelect = (value: number) => {
@@ -37,6 +38,7 @@ const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.R
37
38
  handleSelectDown(value);
38
39
  };
39
40
 
41
+ const itemLabelSelected = dataOption.find((item) => item.value === selectedValue)?.label!;
40
42
  const styleProps = {
41
43
  dataOption,
42
44
  handleSelectDown,
@@ -57,10 +59,17 @@ const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.R
57
59
  onPress={() => setModalVisible(true)}
58
60
  >
59
61
  <Text style={styles(styleProps).selectedText} numberOfLines={1}>
60
- {`${handleLimitTextdisplayByAmount({
61
- limit: 42,
62
- text: dataOption.find((item) => item.value === selectedValue)?.label!,
63
- })}`}
62
+ {itemLabelSelected ? (
63
+ <>
64
+ {" "}
65
+ {`${handleLimitTextdisplayByAmount({
66
+ limit: 42,
67
+ text: itemLabelSelected,
68
+ })}`}
69
+ </>
70
+ ) : (
71
+ "Selecione uma opção"
72
+ )}
64
73
  </Text>
65
74
 
66
75
  <Icons
@@ -7,6 +7,7 @@ type ISelectDropDownProps = {
7
7
  sizeTitleLabel?: number;
8
8
  colortitleLabel?: string;
9
9
  backgroundColor?: string;
10
+ selectedValueID?: number | null;
10
11
  /**retorna o valor selecionado */
11
12
  // eslint-disable-next-line no-unused-vars
12
13
  handleSelectDown: (value: number) => void;
@@ -79,6 +79,10 @@ export const Aberto: Story = {
79
79
  args: {
80
80
  visible: true,
81
81
  textTitle: "Incluir atividade",
82
+ optionSelected: {
83
+ value: 22,
84
+ label: "Em operação - Carregamento",
85
+ },
82
86
  onPressConfirm: (payload) => {
83
87
  console.log("payload", payload);
84
88
  },