@antscorp/antsomi-ui 1.3.5-beta.954 → 1.3.5-beta.955
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.
- package/es/components/icons/DecreaseDecimalIcon.js +1 -1
- package/es/components/icons/IncreaseDecimalIcon.js +1 -1
- package/es/components/molecules/AddDynamicContent/AddDynamicContent.js +1 -1
- package/es/components/molecules/DisplayFormat/DisplayFormatSelect.d.ts +12 -0
- package/es/components/molecules/DisplayFormat/DisplayFormatSelect.js +26 -0
- package/es/components/molecules/DisplayFormat/DisplayFormatSettings.d.ts +13 -0
- package/es/components/molecules/DisplayFormat/DisplayFormatSettings.js +72 -0
- package/es/components/molecules/DisplayFormat/components/FormatDatetime.d.ts +17 -0
- package/es/components/molecules/DisplayFormat/components/FormatDatetime.js +67 -0
- package/es/components/molecules/DisplayFormat/components/FormatNumber.d.ts +51 -0
- package/es/components/molecules/DisplayFormat/components/FormatNumber.js +125 -0
- package/es/components/molecules/DisplayFormat/components/index.d.ts +2 -0
- package/es/components/molecules/DisplayFormat/components/index.js +2 -0
- package/es/components/molecules/DisplayFormat/constants.d.ts +147 -0
- package/es/components/molecules/DisplayFormat/constants.js +237 -0
- package/es/components/molecules/DisplayFormat/currencies.json +1523 -0
- package/es/components/molecules/DisplayFormat/index.d.ts +3 -0
- package/es/components/molecules/DisplayFormat/index.js +3 -0
- package/es/components/molecules/DisplayFormat/regex.d.ts +2 -0
- package/es/components/molecules/DisplayFormat/regex.js +2 -0
- package/es/components/molecules/DisplayFormat/styled.d.ts +9 -0
- package/es/components/molecules/DisplayFormat/styled.js +20 -0
- package/es/components/molecules/DisplayFormat/types.d.ts +13 -0
- package/es/components/molecules/DisplayFormat/types.js +1 -0
- package/es/components/molecules/DisplayFormat/utils.d.ts +41 -0
- package/es/components/molecules/DisplayFormat/utils.js +393 -0
- package/package.json +1 -1
|
@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { useIcon } from './hooks/useIcon';
|
|
4
4
|
export const DecreaseDecimalIcon = forwardRef((props, ref) => {
|
|
5
5
|
const { width, height } = useIcon(props);
|
|
6
|
-
return (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3.60675 10.9215C3.41775 11.106 3.32325 11.3363 3.32325 11.6115C3.32325 11.8868 3.41775 12.1163 3.60675 12.3015C3.80025 12.486 4.056 12.579 4.374 12.579C4.692 12.579 4.9455 12.4868 5.1345 12.3015C5.328 12.117 5.42475 11.8868 5.42475 11.6115C5.42475 11.3363 5.328 11.1068 5.1345 10.9215C4.9455 10.737 4.692 10.644 4.374 10.644C4.056 10.644 3.80025 10.7363 3.60675 10.9215ZM13.3027 8.61375V6.98925C13.3027 6.426 13.2532 5.928 13.1542 5.49375C13.0552 5.055 12.9135 4.67925 12.729 4.36575C12.5445 4.04775 12.321 3.7875 12.0585 3.58575C11.796 3.384 11.502 3.2355 11.175 3.141C10.8341 3.03935 10.4799 2.9893 10.1242 2.9925C9.65175 2.9925 9.222 3.06975 8.835 3.22425C8.44708 3.37551 8.10187 3.61904 7.82925 3.93375C7.55025 4.25625 7.33275 4.671 7.17825 5.178C7.0275 5.6805 6.9525 6.285 6.9525 6.98925V8.61375C6.9525 9.18075 7.002 9.684 7.101 10.122C7.2 10.56 7.34175 10.9387 7.52625 11.2567C7.71525 11.5702 7.93875 11.8305 8.19675 12.0367C8.45925 12.243 8.75325 12.3953 9.08025 12.4943C9.4065 12.5888 9.759 12.636 10.1378 12.636C10.6103 12.636 11.04 12.5587 11.427 12.4042C11.814 12.2497 12.147 12.0113 12.426 11.6888C12.7095 11.3625 12.927 10.9455 13.077 10.4377C13.2278 9.92625 13.3027 9.318 13.3027 8.61375ZM11.4398 6.738V8.859C11.4398 9.28425 11.412 9.64575 11.3557 9.942C11.2995 10.2382 11.214 10.479 11.0977 10.6642C10.999 10.8324 10.8564 10.9706 10.6852 11.064C10.515 11.1482 10.3269 11.1901 10.137 11.1862C9.96975 11.1862 9.8145 11.1608 9.67275 11.109C9.53334 11.056 9.40771 10.9721 9.30525 10.8637C9.19161 10.7311 9.10018 10.5809 9.0345 10.419C8.95388 10.2048 8.89777 9.9821 8.86725 9.75525C8.83039 9.45796 8.8131 9.15856 8.8155 8.859V6.738C8.81021 6.37942 8.83833 6.02112 8.8995 5.66775C8.9595 5.3715 9.04575 5.1345 9.1575 4.95825C9.26925 4.7775 9.40425 4.647 9.56325 4.56525C9.73808 4.48108 9.93025 4.4392 10.1242 4.443C10.2915 4.443 10.4445 4.4685 10.5817 4.52025C10.719 4.572 10.842 4.65375 10.9492 4.7655C11.0565 4.87725 11.1472 5.0235 11.22 5.20425C11.2927 5.3805 11.3467 5.595 11.3812 5.84925C11.4202 6.10275 11.439 6.399 11.439 6.73875L11.4398 6.738ZM11.5875 17.7203L14.8748 14.433V16.908H20.6768V18.5317H14.8748V21.0068L11.5875 17.7195V17.7203Z" }) }));
|
|
6
|
+
return (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, fill: "currentColor", height: height, children: _jsx("path", { fill: "currentColor", d: "M3.60675 10.9215C3.41775 11.106 3.32325 11.3363 3.32325 11.6115C3.32325 11.8868 3.41775 12.1163 3.60675 12.3015C3.80025 12.486 4.056 12.579 4.374 12.579C4.692 12.579 4.9455 12.4868 5.1345 12.3015C5.328 12.117 5.42475 11.8868 5.42475 11.6115C5.42475 11.3363 5.328 11.1068 5.1345 10.9215C4.9455 10.737 4.692 10.644 4.374 10.644C4.056 10.644 3.80025 10.7363 3.60675 10.9215ZM13.3027 8.61375V6.98925C13.3027 6.426 13.2532 5.928 13.1542 5.49375C13.0552 5.055 12.9135 4.67925 12.729 4.36575C12.5445 4.04775 12.321 3.7875 12.0585 3.58575C11.796 3.384 11.502 3.2355 11.175 3.141C10.8341 3.03935 10.4799 2.9893 10.1242 2.9925C9.65175 2.9925 9.222 3.06975 8.835 3.22425C8.44708 3.37551 8.10187 3.61904 7.82925 3.93375C7.55025 4.25625 7.33275 4.671 7.17825 5.178C7.0275 5.6805 6.9525 6.285 6.9525 6.98925V8.61375C6.9525 9.18075 7.002 9.684 7.101 10.122C7.2 10.56 7.34175 10.9387 7.52625 11.2567C7.71525 11.5702 7.93875 11.8305 8.19675 12.0367C8.45925 12.243 8.75325 12.3953 9.08025 12.4943C9.4065 12.5888 9.759 12.636 10.1378 12.636C10.6103 12.636 11.04 12.5587 11.427 12.4042C11.814 12.2497 12.147 12.0113 12.426 11.6888C12.7095 11.3625 12.927 10.9455 13.077 10.4377C13.2278 9.92625 13.3027 9.318 13.3027 8.61375ZM11.4398 6.738V8.859C11.4398 9.28425 11.412 9.64575 11.3557 9.942C11.2995 10.2382 11.214 10.479 11.0977 10.6642C10.999 10.8324 10.8564 10.9706 10.6852 11.064C10.515 11.1482 10.3269 11.1901 10.137 11.1862C9.96975 11.1862 9.8145 11.1608 9.67275 11.109C9.53334 11.056 9.40771 10.9721 9.30525 10.8637C9.19161 10.7311 9.10018 10.5809 9.0345 10.419C8.95388 10.2048 8.89777 9.9821 8.86725 9.75525C8.83039 9.45796 8.8131 9.15856 8.8155 8.859V6.738C8.81021 6.37942 8.83833 6.02112 8.8995 5.66775C8.9595 5.3715 9.04575 5.1345 9.1575 4.95825C9.26925 4.7775 9.40425 4.647 9.56325 4.56525C9.73808 4.48108 9.93025 4.4392 10.1242 4.443C10.2915 4.443 10.4445 4.4685 10.5817 4.52025C10.719 4.572 10.842 4.65375 10.9492 4.7655C11.0565 4.87725 11.1472 5.0235 11.22 5.20425C11.2927 5.3805 11.3467 5.595 11.3812 5.84925C11.4202 6.10275 11.439 6.399 11.439 6.73875L11.4398 6.738ZM11.5875 17.7203L14.8748 14.433V16.908H20.6768V18.5317H14.8748V21.0068L11.5875 17.7195V17.7203Z" }) }));
|
|
7
7
|
});
|
|
@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { useIcon } from './hooks/useIcon';
|
|
4
4
|
export const IncreaseDecimalIcon = forwardRef((props, ref) => {
|
|
5
5
|
const { width, height } = useIcon(props);
|
|
6
|
-
return (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M4.24875 10.2637C4.07625 10.4325 3.99 10.6417 3.99 10.893C3.99 11.1442 4.07625 11.3535 4.24875 11.5222C4.425 11.691 4.65825 11.775 4.9485 11.775C5.23875 11.775 5.46975 11.691 5.64225 11.5222C5.8185 11.3535 5.907 11.1442 5.907 10.893C5.907 10.6417 5.8185 10.4325 5.64225 10.2637C5.46975 10.095 5.23875 10.011 4.9485 10.011C4.65825 10.011 4.425 10.095 4.24875 10.2637ZM13.0942 8.15774V6.67574C13.0942 6.16199 13.0492 5.70749 12.9592 5.31149C12.884 4.9504 12.7529 4.60323 12.5707 4.28249C12.402 3.99224 12.198 3.75524 11.9595 3.57074C11.721 3.38624 11.4517 3.25124 11.154 3.16499C10.843 3.07256 10.5199 3.02706 10.1955 3.02999C9.76425 3.02999 9.372 3.10049 9.0195 3.24149C8.66576 3.37962 8.35095 3.60176 8.10225 3.88874C7.84725 4.18274 7.64925 4.56149 7.50825 5.02349C7.371 5.48249 7.30275 6.03299 7.30275 6.67574V8.15774C7.30275 8.67524 7.34775 9.13424 7.43775 9.53399C7.52775 9.93374 7.6575 10.2787 7.82625 10.569C7.99875 10.8555 8.20275 11.0925 8.4375 11.2807C8.67675 11.469 8.94525 11.6077 9.243 11.6985C9.54075 11.7847 9.8625 11.8275 10.2075 11.8275C10.6387 11.8275 11.031 11.757 11.3835 11.616C11.736 11.475 12.0405 11.2575 12.2947 10.9635C12.5535 10.6657 12.7515 10.2855 12.8887 9.82274C13.026 9.35624 13.0942 8.80125 13.0942 8.1585V8.15774ZM11.394 6.44625V8.38125C11.394 8.76975 11.3685 9.09899 11.3175 9.36899C11.2665 9.63899 11.1885 9.85874 11.082 10.0275C10.98 10.1925 10.8548 10.314 10.7055 10.392C10.5503 10.4687 10.379 10.507 10.206 10.5037C10.053 10.5037 9.912 10.4805 9.78225 10.4332C9.65513 10.3849 9.54054 10.3085 9.447 10.2097C9.34373 10.0885 9.26043 9.95149 9.20025 9.80399C9.12658 9.6084 9.07525 9.40511 9.04725 9.19799C9.0136 8.92682 8.99782 8.65374 9 8.38049V6.44549C9 6.06149 9.0255 5.73599 9.0765 5.46899C9.13125 5.19824 9.21 4.98299 9.312 4.82174C9.414 4.65674 9.53775 4.53749 9.6825 4.46324C9.84193 4.38655 10.0171 4.34828 10.194 4.35149C10.347 4.35149 10.4858 4.37474 10.6118 4.42199C10.7378 4.46924 10.8487 4.54349 10.947 4.64549C11.0452 4.74749 11.127 4.88099 11.1937 5.04524C11.2605 5.20574 11.3093 5.40224 11.3408 5.63324C11.376 5.86424 11.394 6.135 11.394 6.44475V6.44625ZM20.01 8.15774V6.67574C20.01 6.16199 19.965 5.70749 19.875 5.31149C19.7996 4.95054 19.6688 4.60343 19.4872 4.28249C19.3185 3.99224 19.1145 3.75524 18.876 3.57074C18.6375 3.38624 18.3682 3.25124 18.0705 3.16499C17.7595 3.07256 17.4364 3.02706 17.112 3.02999C16.6807 3.02999 16.2885 3.10049 15.936 3.24149C15.5822 3.37946 15.2673 3.60163 15.0187 3.88874C14.7637 4.18274 14.5657 4.56149 14.4247 5.02349C14.2875 5.48249 14.2192 6.03299 14.2192 6.67574V8.15774C14.2192 8.67524 14.2642 9.13424 14.3542 9.53399C14.4442 9.93374 14.574 10.2787 14.7427 10.569C14.9152 10.8555 15.1193 11.0925 15.354 11.2807C15.5933 11.469 15.8617 11.6077 16.1595 11.6985C16.4572 11.7847 16.779 11.8275 17.124 11.8275C17.5553 11.8275 17.9475 11.757 18.3 11.616C18.6525 11.475 18.957 11.2575 19.2112 10.9635C19.47 10.6657 19.668 10.2855 19.8052 9.82274C19.9425 9.35624 20.0107 8.80125 20.0107 8.1585L20.01 8.15774ZM18.3105 6.44625V8.38125C18.3105 8.76975 18.285 9.09899 18.234 9.36899C18.183 9.63899 18.105 9.85874 17.9985 10.0275C17.8965 10.1925 17.7713 10.314 17.622 10.392C17.4666 10.4688 17.295 10.5071 17.1218 10.5037C16.9688 10.5037 16.8277 10.4805 16.698 10.4332C16.5709 10.3849 16.4563 10.3085 16.3627 10.2097C16.2595 10.0885 16.1762 9.95149 16.116 9.80399C16.0423 9.6084 15.991 9.40511 15.963 9.19799C15.9294 8.92682 15.9136 8.65374 15.9158 8.38049V6.44549C15.9158 6.06149 15.9412 5.73599 15.9922 5.46899C16.047 5.19824 16.1257 4.98299 16.2277 4.82174C16.3297 4.65674 16.4535 4.53749 16.5983 4.46324C16.7577 4.38655 16.9329 4.34828 17.1097 4.35149C17.2627 4.35149 17.4015 4.37474 17.5275 4.42199C17.6535 4.46924 17.7645 4.54349 17.8627 4.64549C17.961 4.74749 18.0427 4.88099 18.1095 5.04524C18.1762 5.20574 18.225 5.40224 18.2565 5.63324C18.2917 5.86424 18.309 6.135 18.309 6.44475L18.3105 6.44625ZM13.4295 14.9722L16.4288 17.9715L13.4288 20.9707V18.7125H8.136V17.2312H13.4295V14.973V14.9722Z" }) }));
|
|
6
|
+
return (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, fill: "currentColor", children: _jsx("path", { fill: "currentColor", d: "M4.24875 10.2637C4.07625 10.4325 3.99 10.6417 3.99 10.893C3.99 11.1442 4.07625 11.3535 4.24875 11.5222C4.425 11.691 4.65825 11.775 4.9485 11.775C5.23875 11.775 5.46975 11.691 5.64225 11.5222C5.8185 11.3535 5.907 11.1442 5.907 10.893C5.907 10.6417 5.8185 10.4325 5.64225 10.2637C5.46975 10.095 5.23875 10.011 4.9485 10.011C4.65825 10.011 4.425 10.095 4.24875 10.2637ZM13.0942 8.15774V6.67574C13.0942 6.16199 13.0492 5.70749 12.9592 5.31149C12.884 4.9504 12.7529 4.60323 12.5707 4.28249C12.402 3.99224 12.198 3.75524 11.9595 3.57074C11.721 3.38624 11.4517 3.25124 11.154 3.16499C10.843 3.07256 10.5199 3.02706 10.1955 3.02999C9.76425 3.02999 9.372 3.10049 9.0195 3.24149C8.66576 3.37962 8.35095 3.60176 8.10225 3.88874C7.84725 4.18274 7.64925 4.56149 7.50825 5.02349C7.371 5.48249 7.30275 6.03299 7.30275 6.67574V8.15774C7.30275 8.67524 7.34775 9.13424 7.43775 9.53399C7.52775 9.93374 7.6575 10.2787 7.82625 10.569C7.99875 10.8555 8.20275 11.0925 8.4375 11.2807C8.67675 11.469 8.94525 11.6077 9.243 11.6985C9.54075 11.7847 9.8625 11.8275 10.2075 11.8275C10.6387 11.8275 11.031 11.757 11.3835 11.616C11.736 11.475 12.0405 11.2575 12.2947 10.9635C12.5535 10.6657 12.7515 10.2855 12.8887 9.82274C13.026 9.35624 13.0942 8.80125 13.0942 8.1585V8.15774ZM11.394 6.44625V8.38125C11.394 8.76975 11.3685 9.09899 11.3175 9.36899C11.2665 9.63899 11.1885 9.85874 11.082 10.0275C10.98 10.1925 10.8548 10.314 10.7055 10.392C10.5503 10.4687 10.379 10.507 10.206 10.5037C10.053 10.5037 9.912 10.4805 9.78225 10.4332C9.65513 10.3849 9.54054 10.3085 9.447 10.2097C9.34373 10.0885 9.26043 9.95149 9.20025 9.80399C9.12658 9.6084 9.07525 9.40511 9.04725 9.19799C9.0136 8.92682 8.99782 8.65374 9 8.38049V6.44549C9 6.06149 9.0255 5.73599 9.0765 5.46899C9.13125 5.19824 9.21 4.98299 9.312 4.82174C9.414 4.65674 9.53775 4.53749 9.6825 4.46324C9.84193 4.38655 10.0171 4.34828 10.194 4.35149C10.347 4.35149 10.4858 4.37474 10.6118 4.42199C10.7378 4.46924 10.8487 4.54349 10.947 4.64549C11.0452 4.74749 11.127 4.88099 11.1937 5.04524C11.2605 5.20574 11.3093 5.40224 11.3408 5.63324C11.376 5.86424 11.394 6.135 11.394 6.44475V6.44625ZM20.01 8.15774V6.67574C20.01 6.16199 19.965 5.70749 19.875 5.31149C19.7996 4.95054 19.6688 4.60343 19.4872 4.28249C19.3185 3.99224 19.1145 3.75524 18.876 3.57074C18.6375 3.38624 18.3682 3.25124 18.0705 3.16499C17.7595 3.07256 17.4364 3.02706 17.112 3.02999C16.6807 3.02999 16.2885 3.10049 15.936 3.24149C15.5822 3.37946 15.2673 3.60163 15.0187 3.88874C14.7637 4.18274 14.5657 4.56149 14.4247 5.02349C14.2875 5.48249 14.2192 6.03299 14.2192 6.67574V8.15774C14.2192 8.67524 14.2642 9.13424 14.3542 9.53399C14.4442 9.93374 14.574 10.2787 14.7427 10.569C14.9152 10.8555 15.1193 11.0925 15.354 11.2807C15.5933 11.469 15.8617 11.6077 16.1595 11.6985C16.4572 11.7847 16.779 11.8275 17.124 11.8275C17.5553 11.8275 17.9475 11.757 18.3 11.616C18.6525 11.475 18.957 11.2575 19.2112 10.9635C19.47 10.6657 19.668 10.2855 19.8052 9.82274C19.9425 9.35624 20.0107 8.80125 20.0107 8.1585L20.01 8.15774ZM18.3105 6.44625V8.38125C18.3105 8.76975 18.285 9.09899 18.234 9.36899C18.183 9.63899 18.105 9.85874 17.9985 10.0275C17.8965 10.1925 17.7713 10.314 17.622 10.392C17.4666 10.4688 17.295 10.5071 17.1218 10.5037C16.9688 10.5037 16.8277 10.4805 16.698 10.4332C16.5709 10.3849 16.4563 10.3085 16.3627 10.2097C16.2595 10.0885 16.1762 9.95149 16.116 9.80399C16.0423 9.6084 15.991 9.40511 15.963 9.19799C15.9294 8.92682 15.9136 8.65374 15.9158 8.38049V6.44549C15.9158 6.06149 15.9412 5.73599 15.9922 5.46899C16.047 5.19824 16.1257 4.98299 16.2277 4.82174C16.3297 4.65674 16.4535 4.53749 16.5983 4.46324C16.7577 4.38655 16.9329 4.34828 17.1097 4.35149C17.2627 4.35149 17.4015 4.37474 17.5275 4.42199C17.6535 4.46924 17.7645 4.54349 17.8627 4.64549C17.961 4.74749 18.0427 4.88099 18.1095 5.04524C18.1762 5.20574 18.225 5.40224 18.2565 5.63324C18.2917 5.86424 18.309 6.135 18.309 6.44475L18.3105 6.44625ZM13.4295 14.9722L16.4288 17.9715L13.4288 20.9707V18.7125H8.136V17.2312H13.4295V14.973V14.9722Z" }) }));
|
|
7
7
|
});
|
|
@@ -74,7 +74,7 @@ export const AddDynamicContent = props => {
|
|
|
74
74
|
//* Hooks
|
|
75
75
|
const { t, language } = i18nInstance;
|
|
76
76
|
//* Selectors
|
|
77
|
-
const { triggerEvent } = journeySettings;
|
|
77
|
+
const { triggerEvent } = journeySettings || {};
|
|
78
78
|
const [itemTypeId, setItemTypeId] = useState(null);
|
|
79
79
|
// Form states
|
|
80
80
|
const [form] = Form.useForm();
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
|
|
3
|
+
import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
|
|
4
|
+
export interface DisplayFormatSelectProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
onSettingChange: (settings: TDatetimeFormatSetting | TNumberFormatSettings) => void;
|
|
6
|
+
setting: TDatetimeFormatSetting | TNumberFormatSettings | undefined;
|
|
7
|
+
formatType: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
infos?: PayloadInfo;
|
|
10
|
+
url?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const DisplayFormatSelect: React.FC<DisplayFormatSelectProps>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// Libraries
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { DisplayFormatSettings } from './DisplayFormatSettings';
|
|
5
|
+
// Types
|
|
6
|
+
import { Select } from '../Select';
|
|
7
|
+
// Constants
|
|
8
|
+
import { DYNAMIC_CONTENT_ATTR_DF_TYPE, NUMBER_SETTINGS_DEFAULT, DATETIME_SETTINGS_DEFAULT, } from './constants';
|
|
9
|
+
import { useUpdateEffect } from '@antscorp/antsomi-ui/es/hooks';
|
|
10
|
+
export const DisplayFormatSelect = props => {
|
|
11
|
+
const { onSettingChange, formatType = 'number', setting = formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT, disabled, infos, url, ...rest } = props;
|
|
12
|
+
const { type: settingType = 'number' } = setting || {};
|
|
13
|
+
// Memo
|
|
14
|
+
const typeOptions = useMemo(() => DYNAMIC_CONTENT_ATTR_DF_TYPE.filter(dfType => dfType.dataType === formatType), [formatType]);
|
|
15
|
+
// Effects
|
|
16
|
+
useUpdateEffect(() => {
|
|
17
|
+
onSettingChange(formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
|
|
18
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
19
|
+
}, [formatType]);
|
|
20
|
+
return (typeOptions.length > 0 && (_jsxs("div", { ...rest, style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx(Select, { disabled: disabled, value: settingType, options: typeOptions, onSelect: type => onSettingChange({
|
|
21
|
+
...setting,
|
|
22
|
+
type,
|
|
23
|
+
}) }), _jsx(DisplayFormatSettings, { disabled: disabled, onSettingsChange: setting => {
|
|
24
|
+
onSettingChange(setting);
|
|
25
|
+
}, displayFormatType: settingType, formatSettings: setting, url: url ?? '', infos: infos ?? {} })] })));
|
|
26
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
|
|
3
|
+
export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
|
|
4
|
+
export interface DisplayFormatSettingsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
onSettingsChange: (settings: any) => void;
|
|
6
|
+
formatSettings: any;
|
|
7
|
+
displayFormatType: TDisplayFormat;
|
|
8
|
+
dynamicContentType?: string;
|
|
9
|
+
infos: PayloadInfo;
|
|
10
|
+
url: string;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export declare const DisplayFormatSettings: React.FC<DisplayFormatSettingsProps>;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// Libraries
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { translate, translations } from '@antscorp/antsomi-locales';
|
|
5
|
+
// Components
|
|
6
|
+
import { FormatDatetime, FormatNumber, } from './components';
|
|
7
|
+
import { EditIcon } from '../../icons';
|
|
8
|
+
import { Button, Text } from '../../atoms';
|
|
9
|
+
// Utils
|
|
10
|
+
import { formatDatetimeDF, formatNumberDF } from './utils';
|
|
11
|
+
// Constants
|
|
12
|
+
import { DATE_TIME_EXAMPLE, DATETIME_SETTINGS_DEFAULT, NUMBER_SETTINGS_DEFAULT, NUMBER_EXAMPLE, } from './constants';
|
|
13
|
+
export const DisplayFormatSettings = props => {
|
|
14
|
+
const { infos, url, displayFormatType, formatSettings, dynamicContentType, onSettingsChange, disabled, ...rest } = props;
|
|
15
|
+
const [settings, setSettings] = useState(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
|
|
16
|
+
const [showDetailEdit, setShowDetailEdit] = useState(false);
|
|
17
|
+
const [formatType, setFormatType] = useState(displayFormatType);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
setSettings(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
|
|
20
|
+
setFormatType(displayFormatType);
|
|
21
|
+
}, [displayFormatType]);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (Object.keys(formatSettings).length > 0) {
|
|
24
|
+
setSettings(formatSettings);
|
|
25
|
+
}
|
|
26
|
+
}, [formatSettings]);
|
|
27
|
+
// const handleChange = (updatedSettings: TDatetimeFormatSetting) => {
|
|
28
|
+
// if (onSettingsChange) {
|
|
29
|
+
// onSettingsChange({
|
|
30
|
+
// ...updatedSettings,
|
|
31
|
+
// type: 'datetime',
|
|
32
|
+
// language: portalLanguage,
|
|
33
|
+
// });
|
|
34
|
+
// }
|
|
35
|
+
// };
|
|
36
|
+
const renderFormatDisplay = () => {
|
|
37
|
+
let formatDFValue = '';
|
|
38
|
+
// Numeric Attribute DF
|
|
39
|
+
if (formatType === 'number' || formatType === 'currency' || formatType === 'percentage') {
|
|
40
|
+
formatDFValue = formatNumberDF(NUMBER_EXAMPLE, formatType, settings);
|
|
41
|
+
}
|
|
42
|
+
// Datetime Attribute DF
|
|
43
|
+
if (formatType === 'datetime') {
|
|
44
|
+
formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
|
|
45
|
+
}
|
|
46
|
+
return (_jsxs("div", { ...rest, className: "ants-flex ants-flex-wrap ants-items-center ants-mt-4 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, children: [_jsx(Text, { size: 11, className: "text-[11px] ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
|
|
47
|
+
__html: `${translate(translations._ACT_PREVIEW)}: <bdo dir='ltr'>${formatDFValue}</bdo>`,
|
|
48
|
+
} }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
|
|
49
|
+
marginTop: '1px',
|
|
50
|
+
backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
|
|
51
|
+
border: 'none',
|
|
52
|
+
boxShadow: 'none',
|
|
53
|
+
borderRadius: '5px',
|
|
54
|
+
}, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
|
|
55
|
+
};
|
|
56
|
+
const renderFormatSetting = () => {
|
|
57
|
+
switch (formatType) {
|
|
58
|
+
case 'number':
|
|
59
|
+
case 'percentage':
|
|
60
|
+
case 'currency': {
|
|
61
|
+
return (_jsx(FormatNumber, { ...settings, onSettingsChange: onSettingsChange, type: formatType, url: url, infos: infos }));
|
|
62
|
+
}
|
|
63
|
+
case 'datetime': {
|
|
64
|
+
return (_jsx(FormatDatetime, { ...settings, onSettingsChange: onSettingsChange, type: formatType, dynamicContentType: dynamicContentType }));
|
|
65
|
+
}
|
|
66
|
+
default: {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
return (_jsxs("div", { children: [renderFormatDisplay(), showDetailEdit && renderFormatSetting()] }));
|
|
72
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import dayjs from 'dayjs';
|
|
2
|
+
export type TDatetimeFormatSetting = {
|
|
3
|
+
hasDateFormat: boolean;
|
|
4
|
+
hasTimeFormat: boolean;
|
|
5
|
+
dateParseFormat: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD';
|
|
6
|
+
timeParseFormat: '12hour' | '24hour' | string;
|
|
7
|
+
dateParseOption: 'short' | 'medium' | 'long' | undefined;
|
|
8
|
+
timeParseOption: 'short' | 'medium' | 'long' | undefined;
|
|
9
|
+
language?: string;
|
|
10
|
+
type?: 'datetime';
|
|
11
|
+
};
|
|
12
|
+
export type FormatDatetimeProps = {
|
|
13
|
+
onSettingsChange?: (settingValues: TDatetimeFormatSetting) => void;
|
|
14
|
+
dynamicContentType?: string;
|
|
15
|
+
} & TDatetimeFormatSetting;
|
|
16
|
+
export declare const dateExample: dayjs.Dayjs;
|
|
17
|
+
export declare const FormatDatetime: (props: FormatDatetimeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/* eslint-disable react/no-unused-prop-types */
|
|
3
|
+
// Libraries
|
|
4
|
+
import { useState } from 'react';
|
|
5
|
+
import dayjs from 'dayjs';
|
|
6
|
+
// Locales
|
|
7
|
+
import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
|
|
8
|
+
import { translate, translations } from '@antscorp/antsomi-locales';
|
|
9
|
+
// Atoms
|
|
10
|
+
import { Checkbox, Radio, Space } from '@antscorp/antsomi-ui/es/components/atoms';
|
|
11
|
+
// Molecules
|
|
12
|
+
import { RadioGroup } from '../../RadioGroup';
|
|
13
|
+
import { Select } from '../../Select';
|
|
14
|
+
// Utils
|
|
15
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
16
|
+
// Constants
|
|
17
|
+
import { DATE_FORMAT_LIST, DATE_FORMAT_OPTIONS, TIME_FORMAT_LIST, TIME_FORMAT_OPTIONS, } from '../constants';
|
|
18
|
+
dayjs.extend(customParseFormat);
|
|
19
|
+
export const dateExample = dayjs('2020-04-15 18:23:11');
|
|
20
|
+
export const FormatDatetime = (props) => {
|
|
21
|
+
const { language: portalLanguage } = i18nInstance;
|
|
22
|
+
const { hasDateFormat, hasTimeFormat, dateParseFormat, timeParseFormat, dateParseOption, timeParseOption, onSettingsChange, } = props;
|
|
23
|
+
const [dateFormatExamples, setDateFormatExample] = useState(DATE_FORMAT_LIST[dateParseFormat]);
|
|
24
|
+
const [timeFormatExamples, setTimeFormatExample] = useState(TIME_FORMAT_LIST[timeParseFormat]);
|
|
25
|
+
const dfSettings = {
|
|
26
|
+
hasDateFormat,
|
|
27
|
+
hasTimeFormat,
|
|
28
|
+
dateParseFormat,
|
|
29
|
+
timeParseFormat,
|
|
30
|
+
dateParseOption,
|
|
31
|
+
timeParseOption,
|
|
32
|
+
};
|
|
33
|
+
const handleChange = (updatedSettings) => {
|
|
34
|
+
if (onSettingsChange) {
|
|
35
|
+
onSettingsChange({
|
|
36
|
+
...updatedSettings,
|
|
37
|
+
type: 'datetime',
|
|
38
|
+
language: portalLanguage,
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
return (_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'start' }, children: [_jsx(Checkbox, { style: { marginTop: '4px' }, checked: hasDateFormat, disabled: hasDateFormat && !hasTimeFormat, onChange: e => handleChange({
|
|
43
|
+
...dfSettings,
|
|
44
|
+
hasDateFormat: e.target.checked,
|
|
45
|
+
}) }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }, children: [_jsx("span", { style: { width: '135px' }, children: translate(translations._TITL_DISPLAY_DATE_AS) }), _jsx(Select, { style: { width: 150 }, disabled: !hasDateFormat, defaultValue: dateParseFormat, options: DATE_FORMAT_OPTIONS, onChange: value => {
|
|
46
|
+
handleChange({
|
|
47
|
+
...dfSettings,
|
|
48
|
+
dateParseFormat: value,
|
|
49
|
+
});
|
|
50
|
+
setDateFormatExample(DATE_FORMAT_LIST[value]);
|
|
51
|
+
} })] }), _jsx(RadioGroup, { disabled: !hasDateFormat, defaultValue: dateParseOption, onChange: e => handleChange({
|
|
52
|
+
...dfSettings,
|
|
53
|
+
dateParseOption: e.target.value,
|
|
54
|
+
}), children: _jsxs(Space, { direction: "vertical", size: "middle", children: [_jsx(Radio, { value: "short", children: dateFormatExamples.SHORT }), _jsx(Radio, { value: "medium", children: dateFormatExamples.MEDIUM }), _jsx(Radio, { value: "long", children: dateFormatExamples.LONG })] }) })] })] }), _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'start', marginTop: '10px' }, children: [_jsx(Checkbox, { style: { marginTop: '4px' }, checked: hasTimeFormat, disabled: hasTimeFormat && !hasDateFormat, onChange: e => handleChange({
|
|
55
|
+
...dfSettings,
|
|
56
|
+
hasTimeFormat: e.target.checked,
|
|
57
|
+
}) }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }, children: [_jsx("span", { style: { width: '135px' }, children: translate(translations._TITL_DISPLAY_TIME_AS) }), _jsx(Select, { style: { width: 150 }, disabled: !hasTimeFormat, defaultValue: timeParseFormat, options: TIME_FORMAT_OPTIONS, onChange: value => {
|
|
58
|
+
handleChange({
|
|
59
|
+
...dfSettings,
|
|
60
|
+
timeParseFormat: value,
|
|
61
|
+
});
|
|
62
|
+
setTimeFormatExample(TIME_FORMAT_LIST[value]);
|
|
63
|
+
} })] }), _jsx(RadioGroup, { disabled: !hasTimeFormat, defaultValue: timeParseOption, onChange: e => handleChange({
|
|
64
|
+
...dfSettings,
|
|
65
|
+
timeParseOption: e.target.value,
|
|
66
|
+
}), children: _jsxs(Space, { direction: "vertical", size: "middle", children: [_jsx(Radio, { value: "short", children: timeFormatExamples.SHORT }), _jsx(Radio, { value: "medium", children: timeFormatExamples.MEDIUM }), _jsx(Radio, { value: "long", children: timeFormatExamples.LONG })] }) })] })] })] }));
|
|
67
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { TDisplayFormat } from '../DisplayFormatSettings';
|
|
2
|
+
import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
|
|
3
|
+
declare const groupingOptions: {
|
|
4
|
+
readonly COMMA: {
|
|
5
|
+
readonly index: 0;
|
|
6
|
+
readonly label: `${string} ( , )`;
|
|
7
|
+
readonly value: ",";
|
|
8
|
+
};
|
|
9
|
+
readonly DOT: {
|
|
10
|
+
readonly index: 1;
|
|
11
|
+
readonly label: "Dot ( . )";
|
|
12
|
+
readonly value: ".";
|
|
13
|
+
};
|
|
14
|
+
readonly NONE: {
|
|
15
|
+
readonly index: 2;
|
|
16
|
+
readonly label: "None";
|
|
17
|
+
readonly value: "none";
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
declare const decimalOptions: {
|
|
21
|
+
readonly COMMA: {
|
|
22
|
+
readonly index: 0;
|
|
23
|
+
readonly label: `${string} ( , )`;
|
|
24
|
+
readonly value: ",";
|
|
25
|
+
};
|
|
26
|
+
readonly DOT: {
|
|
27
|
+
readonly index: 1;
|
|
28
|
+
readonly label: "Dot ( . )";
|
|
29
|
+
readonly value: ".";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export type TGroupingSeparator = (typeof groupingOptions)[keyof typeof groupingOptions]['value'];
|
|
33
|
+
export type TDecimalSeparator = (typeof decimalOptions)[keyof typeof decimalOptions]['value'];
|
|
34
|
+
export type TNumberFormatSettings = {
|
|
35
|
+
decimalPlaces: number;
|
|
36
|
+
grouping: TGroupingSeparator;
|
|
37
|
+
decimal: TDecimalSeparator;
|
|
38
|
+
isCompact: boolean;
|
|
39
|
+
currencyCode: string;
|
|
40
|
+
prefixType: 'symbol' | 'code';
|
|
41
|
+
type?: TDisplayFormat;
|
|
42
|
+
};
|
|
43
|
+
type FormatNumberProps = {
|
|
44
|
+
onSettingsChange?: (settingValues: TNumberFormatSettings) => void;
|
|
45
|
+
type: TDisplayFormat;
|
|
46
|
+
} & TNumberFormatSettings & {
|
|
47
|
+
infos: PayloadInfo;
|
|
48
|
+
url: string;
|
|
49
|
+
};
|
|
50
|
+
export declare const FormatNumber: (props: FormatNumberProps) => import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
export {};
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
// Libraries
|
|
3
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
4
|
+
// Components
|
|
5
|
+
import { Radio } from '@antscorp/antsomi-ui/es/components/atoms';
|
|
6
|
+
import { Tooltip, Form, Select, Checkbox, Button } from 'antd';
|
|
7
|
+
// Json
|
|
8
|
+
import Currencies from '../currencies.json';
|
|
9
|
+
// Constants
|
|
10
|
+
import { ATTRIBUTE_NUMBERIC_FORMAT_OPTION } from '../constants';
|
|
11
|
+
// Services
|
|
12
|
+
import { getCurrencyList } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/ListCurrency';
|
|
13
|
+
// Locales
|
|
14
|
+
import { translate, translations } from '@antscorp/antsomi-locales';
|
|
15
|
+
import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
|
|
16
|
+
import { DecreaseDecimalIcon, IncreaseDecimalIcon, ViewDetailsInformationIcon, } from '../../../icons';
|
|
17
|
+
import { CURRENCY_REGEX, DECIMAL_PLACES_REGEX } from '../regex';
|
|
18
|
+
const groupingOptions = ATTRIBUTE_NUMBERIC_FORMAT_OPTION.GROUPING_SEPARATOR;
|
|
19
|
+
const decimalOptions = ATTRIBUTE_NUMBERIC_FORMAT_OPTION.DECIMAL_SEPARATOR;
|
|
20
|
+
export const FormatNumber = (props) => {
|
|
21
|
+
const { t, language } = i18nInstance;
|
|
22
|
+
const { onSettingsChange, type: displayType, infos, url } = props;
|
|
23
|
+
const { currencyCode, decimalPlaces, grouping, decimal, prefixType, isCompact } = props;
|
|
24
|
+
const settingValues = {
|
|
25
|
+
decimalPlaces,
|
|
26
|
+
grouping,
|
|
27
|
+
decimal,
|
|
28
|
+
isCompact,
|
|
29
|
+
currencyCode,
|
|
30
|
+
prefixType,
|
|
31
|
+
};
|
|
32
|
+
const [listCurrencyOptions, setListCurrencyOptions] = useState([]);
|
|
33
|
+
const [isLoadingCurrencyOptions, setIsLoadingCurrencyOptions] = useState(true);
|
|
34
|
+
const [decimalPlacesLabel, setDecimalPlacesLabel] = useState('');
|
|
35
|
+
const onChangeSettingsHandle = (settingValues) => {
|
|
36
|
+
if (onSettingsChange) {
|
|
37
|
+
onSettingsChange({
|
|
38
|
+
...settingValues,
|
|
39
|
+
type: displayType,
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
(async () => {
|
|
45
|
+
if (listCurrencyOptions.length) {
|
|
46
|
+
setListCurrencyOptions(prevOptions => prevOptions.map(currencyOption => {
|
|
47
|
+
currencyOption.label =
|
|
48
|
+
prefixType === 'symbol'
|
|
49
|
+
? currencyOption.label.replace(CURRENCY_REGEX, `(${Currencies[currencyOption.value]?.symbol})`)
|
|
50
|
+
: currencyOption.label.replace(CURRENCY_REGEX, `(${currencyOption.value})`);
|
|
51
|
+
return currencyOption;
|
|
52
|
+
}));
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
setIsLoadingCurrencyOptions(true);
|
|
56
|
+
try {
|
|
57
|
+
const data = await getCurrencyList({ lang: language, url }, infos);
|
|
58
|
+
const currencies = data.reduce((accumulate, currency) => {
|
|
59
|
+
if (Currencies[currency.code]) {
|
|
60
|
+
accumulate.push({
|
|
61
|
+
value: currency.code,
|
|
62
|
+
label: prefixType === 'symbol'
|
|
63
|
+
? `${currency.name.replace(CURRENCY_REGEX, '')} (${Currencies[currency.code]?.symbol})`
|
|
64
|
+
: `${currency.name.replace(CURRENCY_REGEX, '')} (${currency.code})`,
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
// console.log('library not found ', currency.code + ' - ' + currency.name);
|
|
69
|
+
}
|
|
70
|
+
return accumulate;
|
|
71
|
+
}, []);
|
|
72
|
+
setListCurrencyOptions(currencies);
|
|
73
|
+
}
|
|
74
|
+
catch (err) {
|
|
75
|
+
setListCurrencyOptions([]);
|
|
76
|
+
}
|
|
77
|
+
finally {
|
|
78
|
+
setIsLoadingCurrencyOptions(false);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
})();
|
|
82
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
83
|
+
}, [prefixType]);
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
setDecimalPlacesLabel(translate(translations._DISPLAY_CHANGE_DECIMAL_PLACES).replace(DECIMAL_PLACES_REGEX, decimalPlaces.toString()));
|
|
86
|
+
}, [decimalPlaces]);
|
|
87
|
+
const listGroupingSeparatorOptions = useMemo(() => Object.values(groupingOptions)
|
|
88
|
+
.sort((a, b) => a.index - b.index)
|
|
89
|
+
.map(grouping => ({
|
|
90
|
+
...grouping,
|
|
91
|
+
...(grouping.value === decimal && { disabled: true }),
|
|
92
|
+
})), [decimal]);
|
|
93
|
+
const listDecimalSeparatorOptions = useMemo(() => Object.values(decimalOptions)
|
|
94
|
+
.sort((a, b) => a.index - b.index)
|
|
95
|
+
.map(decimal => ({
|
|
96
|
+
...decimal,
|
|
97
|
+
...(decimal.value === grouping && { disabled: true }),
|
|
98
|
+
})), [grouping]);
|
|
99
|
+
return (_jsxs(Form, { style: { width: '100%', fontSize: '12px' }, labelAlign: "left", children: [displayType === 'currency' && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { labelCol: { span: 3 }, wrapperCol: { span: 21 }, label: translate(translations._TITL_CURRENCY), colon: false, children: _jsxs(Radio.Group, { value: prefixType, onChange: ({ target: { value } }) => onChangeSettingsHandle({
|
|
100
|
+
...settingValues,
|
|
101
|
+
prefixType: value,
|
|
102
|
+
}), children: [_jsx(Radio, { style: { fontSize: 12 }, value: "code", children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencyCode) }), _jsx(Radio, { style: { fontSize: 12 }, value: "symbol", children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencySymbol) })] }) }), _jsx(Form.Item, { label: " ", labelCol: { span: 3 }, wrapperCol: { span: 21 }, colon: false, children: _jsx(Select, { style: { width: 150 }, disabled: isLoadingCurrencyOptions, options: listCurrencyOptions, value: currencyCode, onChange: value => onChangeSettingsHandle({
|
|
103
|
+
...settingValues,
|
|
104
|
+
currencyCode: value,
|
|
105
|
+
}), showSearch: true }) })] })), _jsx(Form.Item, { children: _jsx(Checkbox, { style: { fontSize: 12 }, checked: isCompact, onChange: ({ target: { checked } }) => {
|
|
106
|
+
onChangeSettingsHandle({
|
|
107
|
+
...settingValues,
|
|
108
|
+
isCompact: checked,
|
|
109
|
+
});
|
|
110
|
+
}, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 3 }, wrapperCol: { span: 21 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
|
|
111
|
+
...settingValues,
|
|
112
|
+
decimalPlaces: decimalPlaces - 1,
|
|
113
|
+
}), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({
|
|
114
|
+
...settingValues,
|
|
115
|
+
decimalPlaces: decimalPlaces + 1,
|
|
116
|
+
}), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
|
|
117
|
+
.groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 3 }, wrapperCol: { span: 21 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
|
|
118
|
+
...settingValues,
|
|
119
|
+
grouping: value,
|
|
120
|
+
}), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
|
|
121
|
+
.decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 3 }, wrapperCol: { span: 21 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
|
|
122
|
+
...settingValues,
|
|
123
|
+
decimal: value,
|
|
124
|
+
}), options: listDecimalSeparatorOptions }) })] }));
|
|
125
|
+
};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import dayjs from 'dayjs';
|
|
2
|
+
import { TDataType } from './types';
|
|
3
|
+
import { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
|
|
4
|
+
export declare const DYNAMIC_CONTENT_SETTING_KEY: {
|
|
5
|
+
EVENT: string;
|
|
6
|
+
INDEX: string;
|
|
7
|
+
ATTRIBUTE: string;
|
|
8
|
+
DYNAMIC_CONTENT_NUMBERIC_ATTR_FORMAT_SETTINGS: string;
|
|
9
|
+
DYNAMIC_CONTENT_DATETIME_ATTR_FORMAT_SETTINGS: string;
|
|
10
|
+
DISPLAY_FORMAT_TYPE: string;
|
|
11
|
+
DYNAMIC_CONTENT_TYPE: string;
|
|
12
|
+
PROMOTION_POOL: string;
|
|
13
|
+
SOURCE: string;
|
|
14
|
+
FUNCTION: string;
|
|
15
|
+
PERNAME: string;
|
|
16
|
+
SAVE_AS_TEMPLATE: string;
|
|
17
|
+
DATA_TYPE: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const DYNAMIC_CONTENT_TYPE_KEY: {
|
|
20
|
+
readonly BO_SETTINGS: "bo-settings";
|
|
21
|
+
readonly CUSTOMER_ATTRIBUTE: "customer-attribute";
|
|
22
|
+
readonly EVENT_ATTRIBUTE: "event-attribute";
|
|
23
|
+
readonly PROMOTION_CODE: "promotion-code";
|
|
24
|
+
readonly VISITOR_ATTRIBUTE: "visitor-attribute";
|
|
25
|
+
readonly CUSTOM_FUNCTION: "custom";
|
|
26
|
+
};
|
|
27
|
+
export declare const DYNAMIC_CONTENT_TYPE: {
|
|
28
|
+
[key: string]: {
|
|
29
|
+
index: number;
|
|
30
|
+
label: string;
|
|
31
|
+
value: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export declare const DYNAMIC_CONTENT_ATTR_DF_TYPE: {
|
|
35
|
+
label: string;
|
|
36
|
+
value: string;
|
|
37
|
+
dataType: TDataType;
|
|
38
|
+
}[];
|
|
39
|
+
export declare const DATA_TYPE: {
|
|
40
|
+
[key: string]: {
|
|
41
|
+
index: number;
|
|
42
|
+
label: string;
|
|
43
|
+
value: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
export declare const ATTRIBUTE_STATUS: {
|
|
47
|
+
4: {
|
|
48
|
+
value: number;
|
|
49
|
+
label: string;
|
|
50
|
+
errorMessage: string;
|
|
51
|
+
};
|
|
52
|
+
DELETE: {
|
|
53
|
+
value: number;
|
|
54
|
+
label: string;
|
|
55
|
+
errorMessage: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
export declare const ATTRIBUTE_TYPE: {
|
|
59
|
+
ITEM: number;
|
|
60
|
+
};
|
|
61
|
+
export declare const BO_STATUS: {
|
|
62
|
+
4: {
|
|
63
|
+
value: number;
|
|
64
|
+
label: string;
|
|
65
|
+
errorMessage: string;
|
|
66
|
+
};
|
|
67
|
+
DELETE: {
|
|
68
|
+
value: number;
|
|
69
|
+
label: string;
|
|
70
|
+
errorMessage: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
|
|
74
|
+
readonly DECIMAL_SEPARATOR: {
|
|
75
|
+
readonly COMMA: {
|
|
76
|
+
readonly index: 0;
|
|
77
|
+
readonly label: `${string} ( , )`;
|
|
78
|
+
readonly value: ",";
|
|
79
|
+
};
|
|
80
|
+
readonly DOT: {
|
|
81
|
+
readonly index: 1;
|
|
82
|
+
readonly label: "Dot ( . )";
|
|
83
|
+
readonly value: ".";
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
readonly GROUPING_SEPARATOR: {
|
|
87
|
+
readonly COMMA: {
|
|
88
|
+
readonly index: 0;
|
|
89
|
+
readonly label: `${string} ( , )`;
|
|
90
|
+
readonly value: ",";
|
|
91
|
+
};
|
|
92
|
+
readonly DOT: {
|
|
93
|
+
readonly index: 1;
|
|
94
|
+
readonly label: "Dot ( . )";
|
|
95
|
+
readonly value: ".";
|
|
96
|
+
};
|
|
97
|
+
readonly NONE: {
|
|
98
|
+
readonly index: 2;
|
|
99
|
+
readonly label: "None";
|
|
100
|
+
readonly value: "none";
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
export declare const COLLECTION_STATUS: {
|
|
105
|
+
2: {
|
|
106
|
+
value: number;
|
|
107
|
+
label: string;
|
|
108
|
+
errorMessage: string;
|
|
109
|
+
};
|
|
110
|
+
4: {
|
|
111
|
+
value: number;
|
|
112
|
+
label: string;
|
|
113
|
+
errorMessage: string;
|
|
114
|
+
};
|
|
115
|
+
DELETE: {
|
|
116
|
+
value: number;
|
|
117
|
+
label: string;
|
|
118
|
+
errorMessage: string;
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
export declare const NUMBER_EXAMPLE = 1234.56789;
|
|
122
|
+
export declare const DATE_TIME_EXAMPLE: dayjs.Dayjs;
|
|
123
|
+
export declare const DATE_FORMAT_OPTIONS: {
|
|
124
|
+
label: string;
|
|
125
|
+
value: string;
|
|
126
|
+
}[];
|
|
127
|
+
export declare const TIME_FORMAT_OPTIONS: {
|
|
128
|
+
label: string;
|
|
129
|
+
value: string;
|
|
130
|
+
}[];
|
|
131
|
+
export declare const DATE_FORMAT_LIST: {
|
|
132
|
+
[x: string]: {
|
|
133
|
+
SHORT: string;
|
|
134
|
+
MEDIUM: string;
|
|
135
|
+
LONG: string;
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
export declare const TIME_FORMAT_LIST: {
|
|
139
|
+
[x: string]: {
|
|
140
|
+
SHORT: string;
|
|
141
|
+
MEDIUM: string;
|
|
142
|
+
LONG: string;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
export declare const GROUPING_OPTIONS: {};
|
|
146
|
+
export declare const NUMBER_SETTINGS_DEFAULT: TNumberFormatSettings;
|
|
147
|
+
export declare const DATETIME_SETTINGS_DEFAULT: TDatetimeFormatSetting;
|