@unif/react-native-ui 0.1.0 → 0.2.2
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/lib/commonjs/README.md +99 -0
- package/lib/commonjs/action-sheet/index.js +71 -0
- package/lib/commonjs/action-sheet/index.js.map +1 -0
- package/lib/commonjs/action-sheet/index.md +69 -0
- package/lib/commonjs/action-sheet/style/index.js +42 -0
- package/lib/commonjs/action-sheet/style/index.js.map +1 -0
- package/lib/commonjs/avatar/index.js +50 -0
- package/lib/commonjs/avatar/index.js.map +1 -0
- package/lib/commonjs/avatar/index.md +51 -0
- package/lib/commonjs/avatar/style/index.js +21 -0
- package/lib/commonjs/avatar/style/index.js.map +1 -0
- package/lib/commonjs/button/index.js +60 -0
- package/lib/commonjs/button/index.js.map +1 -0
- package/lib/commonjs/button/index.md +90 -0
- package/lib/commonjs/button/style/index.js +98 -0
- package/lib/commonjs/button/style/index.js.map +1 -0
- package/lib/commonjs/center/index.js +26 -0
- package/lib/commonjs/center/index.js.map +1 -0
- package/lib/commonjs/center/index.md +28 -0
- package/lib/commonjs/center/style/index.js +14 -0
- package/lib/commonjs/center/style/index.js.map +1 -0
- package/lib/commonjs/chip/index.js +69 -0
- package/lib/commonjs/chip/index.js.map +1 -0
- package/lib/commonjs/chip/index.md +60 -0
- package/lib/commonjs/chip/style/index.js +46 -0
- package/lib/commonjs/chip/style/index.js.map +1 -0
- package/lib/commonjs/column/index.js +35 -0
- package/lib/commonjs/column/index.js.map +1 -0
- package/lib/commonjs/column/index.md +34 -0
- package/lib/commonjs/column/style/index.js +13 -0
- package/lib/commonjs/column/style/index.js.map +1 -0
- package/lib/commonjs/divider/index.js +32 -0
- package/lib/commonjs/divider/index.js.map +1 -0
- package/lib/commonjs/divider/index.md +44 -0
- package/lib/commonjs/divider/style/index.js +22 -0
- package/lib/commonjs/divider/style/index.js.map +1 -0
- package/lib/commonjs/hooks/index.js +13 -0
- package/lib/commonjs/hooks/index.js.map +1 -0
- package/lib/commonjs/hooks/index.md +71 -0
- package/lib/commonjs/hooks/useMergeStyles.js +31 -0
- package/lib/commonjs/hooks/useMergeStyles.js.map +1 -0
- package/lib/commonjs/index.js +146 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/input/index.js +76 -0
- package/lib/commonjs/input/index.js.map +1 -0
- package/lib/commonjs/input/index.md +73 -0
- package/lib/commonjs/input/style/index.js +31 -0
- package/lib/commonjs/input/style/index.js.map +1 -0
- package/lib/commonjs/list-item/index.js +76 -0
- package/lib/commonjs/list-item/index.js.map +1 -0
- package/lib/commonjs/list-item/index.md +101 -0
- package/lib/commonjs/list-item/style/index.js +43 -0
- package/lib/commonjs/list-item/style/index.js.map +1 -0
- package/lib/commonjs/menu/index.js +66 -0
- package/lib/commonjs/menu/index.js.map +1 -0
- package/lib/commonjs/menu/style/index.js +32 -0
- package/lib/commonjs/menu/style/index.js.map +1 -0
- package/lib/commonjs/package.json +1 -0
- package/lib/commonjs/popover/index.js +68 -0
- package/lib/commonjs/popover/index.js.map +1 -0
- package/lib/commonjs/popover/index.md +57 -0
- package/lib/commonjs/popover/style/index.js +26 -0
- package/lib/commonjs/popover/style/index.js.map +1 -0
- package/lib/commonjs/row/index.js +36 -0
- package/lib/commonjs/row/index.js.map +1 -0
- package/lib/commonjs/row/index.md +46 -0
- package/lib/commonjs/row/style/index.js +19 -0
- package/lib/commonjs/row/style/index.js.map +1 -0
- package/lib/commonjs/space/index.js +25 -0
- package/lib/commonjs/space/index.js.map +1 -0
- package/lib/commonjs/space/index.md +31 -0
- package/lib/commonjs/space/style/index.js +15 -0
- package/lib/commonjs/space/style/index.js.map +1 -0
- package/lib/commonjs/text/index.js +40 -0
- package/lib/commonjs/text/index.js.map +1 -0
- package/lib/commonjs/text/index.md +63 -0
- package/lib/commonjs/text/style/index.js +56 -0
- package/lib/commonjs/text/style/index.js.map +1 -0
- package/lib/commonjs/theme/context.js +40 -0
- package/lib/commonjs/theme/context.js.map +1 -0
- package/lib/commonjs/theme/tokens.js +68 -0
- package/lib/commonjs/theme/tokens.js.map +1 -0
- package/lib/commonjs/touchable/index.js +40 -0
- package/lib/commonjs/touchable/index.js.map +1 -0
- package/lib/commonjs/touchable/index.md +42 -0
- package/lib/commonjs/touchable/style/index.js +13 -0
- package/lib/commonjs/touchable/style/index.js.map +1 -0
- package/lib/commonjs/wave-animation/index.js +72 -0
- package/lib/commonjs/wave-animation/index.js.map +1 -0
- package/lib/commonjs/wave-animation/index.md +50 -0
- package/lib/module/action-sheet/index.js +5 -2
- package/lib/module/action-sheet/index.js.map +1 -1
- package/lib/module/action-sheet/style/index.js +7 -8
- package/lib/module/action-sheet/style/index.js.map +1 -1
- package/lib/module/avatar/index.js +5 -2
- package/lib/module/avatar/index.js.map +1 -1
- package/lib/module/avatar/style/index.js +4 -5
- package/lib/module/avatar/style/index.js.map +1 -1
- package/lib/module/button/index.js +5 -2
- package/lib/module/button/index.js.map +1 -1
- package/lib/module/button/style/index.js +8 -9
- package/lib/module/button/style/index.js.map +1 -1
- package/lib/module/chip/index.js +7 -2
- package/lib/module/chip/index.js.map +1 -1
- package/lib/module/chip/style/index.js +12 -13
- package/lib/module/chip/style/index.js.map +1 -1
- package/lib/module/divider/index.js +13 -7
- package/lib/module/divider/index.js.map +1 -1
- package/lib/module/divider/style/index.js +4 -5
- package/lib/module/divider/style/index.js.map +1 -1
- package/lib/module/index.js +4 -4
- package/lib/module/index.js.map +1 -1
- package/lib/module/input/index.js +5 -3
- package/lib/module/input/index.js.map +1 -1
- package/lib/module/input/style/index.js +8 -9
- package/lib/module/input/style/index.js.map +1 -1
- package/lib/module/list-item/index.js +9 -7
- package/lib/module/list-item/index.js.map +1 -1
- package/lib/module/list-item/style/index.js +5 -6
- package/lib/module/list-item/style/index.js.map +1 -1
- package/lib/module/menu/index.js +60 -0
- package/lib/module/menu/index.js.map +1 -0
- package/lib/module/menu/style/index.js +27 -0
- package/lib/module/menu/style/index.js.map +1 -0
- package/lib/module/popover/index.js +5 -2
- package/lib/module/popover/index.js.map +1 -1
- package/lib/module/popover/style/index.js +6 -7
- package/lib/module/popover/style/index.js.map +1 -1
- package/lib/module/text/index.js +8 -3
- package/lib/module/text/index.js.map +1 -1
- package/lib/module/text/style/index.js +12 -14
- package/lib/module/text/style/index.js.map +1 -1
- package/lib/module/theme/context.js +33 -0
- package/lib/module/theme/context.js.map +1 -0
- package/lib/module/theme/tokens.js +3 -6
- package/lib/module/theme/tokens.js.map +1 -1
- package/lib/typescript/{jest.setup.d.ts.map → commonjs/jest.setup.d.ts.map} +1 -1
- package/lib/typescript/commonjs/package.json +1 -0
- package/lib/typescript/commonjs/src/action-sheet/index.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/action-sheet/style/index.d.ts +2 -1
- package/lib/typescript/commonjs/src/action-sheet/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/avatar/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/avatar/style/index.d.ts +8 -0
- package/lib/typescript/commonjs/src/avatar/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/button/index.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/button/style/index.d.ts +2 -1
- package/lib/typescript/commonjs/src/button/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/center/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/center/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/chip/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/chip/style/index.d.ts +11 -0
- package/lib/typescript/commonjs/src/chip/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/column/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/column/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/divider/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/divider/style/index.d.ts +10 -0
- package/lib/typescript/commonjs/src/divider/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/hooks/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/hooks/useMergeStyles.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/index.d.ts +6 -3
- package/lib/typescript/commonjs/src/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/input/index.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/input/style/index.d.ts +2 -1
- package/lib/typescript/commonjs/src/input/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/list-item/index.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/list-item/style/index.d.ts +2 -1
- package/lib/typescript/commonjs/src/list-item/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/menu/index.d.ts +36 -0
- package/lib/typescript/commonjs/src/menu/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/menu/style/index.d.ts +32 -0
- package/lib/typescript/commonjs/src/menu/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/popover/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/popover/style/index.d.ts +8 -0
- package/lib/typescript/commonjs/src/popover/style/index.d.ts.map +1 -0
- package/lib/typescript/{src/column → commonjs/src/row}/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/row/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/space/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/space/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/text/index.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/text/style/index.d.ts +5 -4
- package/lib/typescript/commonjs/src/text/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/theme/context.d.ts +17 -0
- package/lib/typescript/commonjs/src/theme/context.d.ts.map +1 -0
- package/lib/typescript/{src → commonjs/src}/theme/tokens.d.ts +4 -3
- package/lib/typescript/commonjs/src/theme/tokens.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/touchable/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/touchable/style/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/wave-animation/index.d.ts.map +1 -0
- package/lib/typescript/module/jest.setup.d.ts +1 -0
- package/lib/typescript/module/jest.setup.d.ts.map +1 -0
- package/lib/typescript/module/src/action-sheet/index.d.ts +22 -0
- package/lib/typescript/module/src/action-sheet/index.d.ts.map +1 -0
- package/lib/typescript/module/src/action-sheet/style/index.d.ts +17 -0
- package/lib/typescript/module/src/action-sheet/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/avatar/index.d.ts +19 -0
- package/lib/typescript/module/src/avatar/index.d.ts.map +1 -0
- package/lib/typescript/module/src/avatar/style/index.d.ts +8 -0
- package/lib/typescript/module/src/avatar/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/button/index.d.ts +24 -0
- package/lib/typescript/module/src/button/index.d.ts.map +1 -0
- package/lib/typescript/module/src/button/style/index.d.ts +17 -0
- package/lib/typescript/module/src/button/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/center/index.d.ts +11 -0
- package/lib/typescript/module/src/center/index.d.ts.map +1 -0
- package/lib/typescript/module/src/center/style/index.d.ts +5 -0
- package/lib/typescript/module/src/center/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/chip/index.d.ts +22 -0
- package/lib/typescript/module/src/chip/index.d.ts.map +1 -0
- package/lib/typescript/module/src/chip/style/index.d.ts +11 -0
- package/lib/typescript/module/src/chip/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/column/index.d.ts +20 -0
- package/lib/typescript/module/src/column/index.d.ts.map +1 -0
- package/lib/typescript/module/src/column/style/index.d.ts +4 -0
- package/lib/typescript/module/src/column/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/divider/index.d.ts +13 -0
- package/lib/typescript/module/src/divider/index.d.ts.map +1 -0
- package/lib/typescript/module/src/divider/style/index.d.ts +10 -0
- package/lib/typescript/module/src/divider/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/hooks/index.d.ts +2 -0
- package/lib/typescript/module/src/hooks/index.d.ts.map +1 -0
- package/lib/typescript/module/src/hooks/useMergeStyles.d.ts +13 -0
- package/lib/typescript/module/src/hooks/useMergeStyles.d.ts.map +1 -0
- package/lib/typescript/module/src/index.d.ts +42 -0
- package/lib/typescript/module/src/index.d.ts.map +1 -0
- package/lib/typescript/module/src/input/index.d.ts +29 -0
- package/lib/typescript/module/src/input/index.d.ts.map +1 -0
- package/lib/typescript/module/src/input/style/index.d.ts +9 -0
- package/lib/typescript/module/src/input/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/list-item/index.d.ts +25 -0
- package/lib/typescript/module/src/list-item/index.d.ts.map +1 -0
- package/lib/typescript/module/src/list-item/style/index.d.ts +18 -0
- package/lib/typescript/module/src/list-item/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/menu/index.d.ts +36 -0
- package/lib/typescript/module/src/menu/index.d.ts.map +1 -0
- package/lib/typescript/module/src/menu/style/index.d.ts +32 -0
- package/lib/typescript/module/src/menu/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/popover/index.d.ts +27 -0
- package/lib/typescript/module/src/popover/index.d.ts.map +1 -0
- package/lib/typescript/module/src/popover/style/index.d.ts +8 -0
- package/lib/typescript/module/src/popover/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/row/index.d.ts +22 -0
- package/lib/typescript/module/src/row/index.d.ts.map +1 -0
- package/lib/typescript/module/src/row/style/index.d.ts +8 -0
- package/lib/typescript/module/src/row/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/space/index.d.ts +15 -0
- package/lib/typescript/module/src/space/index.d.ts.map +1 -0
- package/lib/typescript/module/src/space/style/index.d.ts +7 -0
- package/lib/typescript/module/src/space/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/text/index.d.ts +18 -0
- package/lib/typescript/module/src/text/index.d.ts.map +1 -0
- package/lib/typescript/module/src/text/style/index.d.ts +36 -0
- package/lib/typescript/module/src/text/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/theme/context.d.ts +17 -0
- package/lib/typescript/module/src/theme/context.d.ts.map +1 -0
- package/lib/typescript/module/src/theme/tokens.d.ts +62 -0
- package/lib/typescript/module/src/theme/tokens.d.ts.map +1 -0
- package/lib/typescript/module/src/touchable/index.d.ts +19 -0
- package/lib/typescript/module/src/touchable/index.d.ts.map +1 -0
- package/lib/typescript/module/src/touchable/style/index.d.ts +4 -0
- package/lib/typescript/module/src/touchable/style/index.d.ts.map +1 -0
- package/lib/typescript/module/src/wave-animation/index.d.ts +20 -0
- package/lib/typescript/module/src/wave-animation/index.d.ts.map +1 -0
- package/package.json +16 -5
- package/src/action-sheet/index.tsx +7 -3
- package/src/action-sheet/style/index.tsx +10 -8
- package/src/avatar/index.tsx +7 -3
- package/src/avatar/style/index.tsx +5 -5
- package/src/button/index.tsx +7 -3
- package/src/button/style/index.tsx +11 -9
- package/src/chip/index.tsx +16 -5
- package/src/chip/style/index.tsx +15 -13
- package/src/divider/index.tsx +18 -11
- package/src/divider/style/index.tsx +12 -10
- package/src/index.tsx +7 -4
- package/src/input/index.tsx +6 -4
- package/src/input/style/index.tsx +9 -9
- package/src/list-item/index.tsx +11 -6
- package/src/list-item/style/index.tsx +6 -6
- package/src/menu/index.tsx +96 -0
- package/src/menu/style/index.tsx +34 -0
- package/src/popover/index.tsx +7 -3
- package/src/popover/style/index.tsx +7 -7
- package/src/text/index.tsx +9 -3
- package/src/text/style/index.tsx +16 -12
- package/src/theme/context.tsx +38 -0
- package/src/theme/tokens.ts +5 -7
- package/lib/module/theme/config.js +0 -27
- package/lib/module/theme/config.js.map +0 -1
- package/lib/typescript/src/action-sheet/index.d.ts.map +0 -1
- package/lib/typescript/src/action-sheet/style/index.d.ts.map +0 -1
- package/lib/typescript/src/avatar/index.d.ts.map +0 -1
- package/lib/typescript/src/avatar/style/index.d.ts +0 -7
- package/lib/typescript/src/avatar/style/index.d.ts.map +0 -1
- package/lib/typescript/src/button/index.d.ts.map +0 -1
- package/lib/typescript/src/button/style/index.d.ts.map +0 -1
- package/lib/typescript/src/center/index.d.ts.map +0 -1
- package/lib/typescript/src/center/style/index.d.ts.map +0 -1
- package/lib/typescript/src/chip/index.d.ts.map +0 -1
- package/lib/typescript/src/chip/style/index.d.ts +0 -10
- package/lib/typescript/src/chip/style/index.d.ts.map +0 -1
- package/lib/typescript/src/column/style/index.d.ts.map +0 -1
- package/lib/typescript/src/divider/index.d.ts.map +0 -1
- package/lib/typescript/src/divider/style/index.d.ts +0 -9
- package/lib/typescript/src/divider/style/index.d.ts.map +0 -1
- package/lib/typescript/src/hooks/index.d.ts.map +0 -1
- package/lib/typescript/src/hooks/useMergeStyles.d.ts.map +0 -1
- package/lib/typescript/src/index.d.ts.map +0 -1
- package/lib/typescript/src/input/index.d.ts.map +0 -1
- package/lib/typescript/src/input/style/index.d.ts.map +0 -1
- package/lib/typescript/src/list-item/index.d.ts.map +0 -1
- package/lib/typescript/src/list-item/style/index.d.ts.map +0 -1
- package/lib/typescript/src/popover/index.d.ts.map +0 -1
- package/lib/typescript/src/popover/style/index.d.ts +0 -7
- package/lib/typescript/src/popover/style/index.d.ts.map +0 -1
- package/lib/typescript/src/row/index.d.ts.map +0 -1
- package/lib/typescript/src/row/style/index.d.ts.map +0 -1
- package/lib/typescript/src/space/index.d.ts.map +0 -1
- package/lib/typescript/src/space/style/index.d.ts.map +0 -1
- package/lib/typescript/src/text/index.d.ts.map +0 -1
- package/lib/typescript/src/text/style/index.d.ts.map +0 -1
- package/lib/typescript/src/theme/config.d.ts +0 -18
- package/lib/typescript/src/theme/config.d.ts.map +0 -1
- package/lib/typescript/src/theme/tokens.d.ts.map +0 -1
- package/lib/typescript/src/touchable/index.d.ts.map +0 -1
- package/lib/typescript/src/touchable/style/index.d.ts.map +0 -1
- package/lib/typescript/src/wave-animation/index.d.ts.map +0 -1
- package/lib/typescript/tests/component/component.coverage.test.d.ts +0 -2
- package/lib/typescript/tests/component/component.coverage.test.d.ts.map +0 -1
- package/lib/typescript/tests/component/component.interaction.test.d.ts +0 -2
- package/lib/typescript/tests/component/component.interaction.test.d.ts.map +0 -1
- package/lib/typescript/tests/component/component.snapshot.test.d.ts +0 -2
- package/lib/typescript/tests/component/component.snapshot.test.d.ts.map +0 -1
- package/lib/typescript/tests/e2e/app.e2e.test.d.ts +0 -2
- package/lib/typescript/tests/e2e/app.e2e.test.d.ts.map +0 -1
- package/lib/typescript/tests/integration/ui.integration.test.d.ts +0 -2
- package/lib/typescript/tests/integration/ui.integration.test.d.ts.map +0 -1
- package/lib/typescript/tests/unit/mergeStyles.unit.test.d.ts +0 -2
- package/lib/typescript/tests/unit/mergeStyles.unit.test.d.ts.map +0 -1
- package/lib/typescript/tests/unit/public-api.unit.test.d.ts +0 -2
- package/lib/typescript/tests/unit/public-api.unit.test.d.ts.map +0 -1
- package/lib/typescript/tests/unit/theme-config.unit.test.d.ts +0 -2
- package/lib/typescript/tests/unit/theme-config.unit.test.d.ts.map +0 -1
- package/src/theme/config.ts +0 -26
- /package/lib/typescript/{jest.setup.d.ts → commonjs/jest.setup.d.ts} +0 -0
- /package/lib/typescript/{src → commonjs/src}/action-sheet/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/avatar/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/button/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/center/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/center/style/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/chip/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/column/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/column/style/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/divider/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/hooks/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/hooks/useMergeStyles.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/input/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/list-item/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/popover/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/row/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/row/style/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/space/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/space/style/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/text/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/touchable/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/touchable/style/index.d.ts +0 -0
- /package/lib/typescript/{src → commonjs/src}/wave-animation/index.d.ts +0 -0
- /package/lib/typescript/{package.json → module/package.json} +0 -0
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# @unif/react-native-ui 基础组件
|
|
2
|
+
|
|
3
|
+
借鉴 antd v6 语义化设计 + ant-design-mobile-rn 实践,提供基础 UI 组件。
|
|
4
|
+
|
|
5
|
+
## 组件总览
|
|
6
|
+
|
|
7
|
+
### 布局
|
|
8
|
+
|
|
9
|
+
| 组件 | 说明 | 文档 |
|
|
10
|
+
|------|------|------|
|
|
11
|
+
| Row | 水平布局 | [row/index.md](./row/index.md) |
|
|
12
|
+
| Column | 垂直布局 | [column/index.md](./column/index.md) |
|
|
13
|
+
| Center | 居中布局 | [center/index.md](./center/index.md) |
|
|
14
|
+
| Space | 间距占位 | [space/index.md](./space/index.md) |
|
|
15
|
+
|
|
16
|
+
### 通用
|
|
17
|
+
|
|
18
|
+
| 组件 | 说明 | 文档 |
|
|
19
|
+
|------|------|------|
|
|
20
|
+
| Text | 语义化文字 | [text/index.md](./text/index.md) |
|
|
21
|
+
| Button | 语义化按钮 | [button/index.md](./button/index.md) |
|
|
22
|
+
| Touchable | 统一触摸反馈 | [touchable/index.md](./touchable/index.md) |
|
|
23
|
+
| Divider | 分割线 | [divider/index.md](./divider/index.md) |
|
|
24
|
+
| ListItem | 列表行 | [list-item/index.md](./list-item/index.md) |
|
|
25
|
+
| mergeStyles | 样式合并工具 | [hooks/index.md](./hooks/index.md) |
|
|
26
|
+
|
|
27
|
+
## 引入方式
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { Row, Column, Center, Space, Text, Button, Touchable, Divider, ListItem } from '@unif/react-native-ui';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 目录结构
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
src/
|
|
37
|
+
├── index.tsx # 统一导出
|
|
38
|
+
├── README.md # 总览(本文件)
|
|
39
|
+
├── theme/
|
|
40
|
+
│ ├── config.ts # 主题配置(configure API)
|
|
41
|
+
│ └── tokens.ts # Design Tokens
|
|
42
|
+
├── hooks/
|
|
43
|
+
│ ├── index.ts
|
|
44
|
+
│ ├── index.md # mergeStyles 文档
|
|
45
|
+
│ └── useMergeStyles.ts
|
|
46
|
+
├── row/
|
|
47
|
+
│ ├── index.tsx # Row 组件
|
|
48
|
+
│ ├── index.md
|
|
49
|
+
│ └── style/
|
|
50
|
+
│ └── index.tsx
|
|
51
|
+
├── column/
|
|
52
|
+
│ ├── index.tsx # Column 组件
|
|
53
|
+
│ ├── index.md
|
|
54
|
+
│ └── style/
|
|
55
|
+
│ └── index.tsx
|
|
56
|
+
├── center/
|
|
57
|
+
│ ├── index.tsx # Center 组件
|
|
58
|
+
│ ├── index.md
|
|
59
|
+
│ └── style/
|
|
60
|
+
│ └── index.tsx
|
|
61
|
+
├── space/
|
|
62
|
+
│ ├── index.tsx # Space 组件
|
|
63
|
+
│ ├── index.md
|
|
64
|
+
│ └── style/
|
|
65
|
+
│ └── index.tsx
|
|
66
|
+
├── text/
|
|
67
|
+
│ ├── index.tsx # Text 组件
|
|
68
|
+
│ ├── index.md
|
|
69
|
+
│ └── style/
|
|
70
|
+
│ └── index.tsx
|
|
71
|
+
├── button/
|
|
72
|
+
│ ├── index.tsx # Button 组件
|
|
73
|
+
│ ├── index.md
|
|
74
|
+
│ └── style/
|
|
75
|
+
│ └── index.tsx
|
|
76
|
+
├── touchable/
|
|
77
|
+
│ ├── index.tsx # Touchable 组件
|
|
78
|
+
│ ├── index.md
|
|
79
|
+
│ └── style/
|
|
80
|
+
│ └── index.tsx
|
|
81
|
+
├── divider/
|
|
82
|
+
│ ├── index.tsx # Divider 组件
|
|
83
|
+
│ ├── index.md
|
|
84
|
+
│ └── style/
|
|
85
|
+
│ └── index.tsx
|
|
86
|
+
└── list-item/
|
|
87
|
+
├── index.tsx # ListItem 组件
|
|
88
|
+
├── index.md
|
|
89
|
+
└── style/
|
|
90
|
+
└── index.tsx
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## 设计原则
|
|
94
|
+
|
|
95
|
+
1. **语义化** — `variant="caption"` 而非 `fontSize={13}`,意图清晰
|
|
96
|
+
2. **Semantic Styles** — 消费方通过 `styles={{content: {...}}}` 精确覆盖内部 slot,不侵入组件结构
|
|
97
|
+
3. **Token 驱动** — 所有颜色、间距来自 `tokens`,主题可控
|
|
98
|
+
4. **样式数组组合** — `[baseStyle, variantStyle, stateStyle, userStyle]` 优先级叠加
|
|
99
|
+
5. **性能安全** — 样式常量预定义在模块顶层,`mergeStyles` 配合 `useMemo` 使用
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _hooks = require("../hooks");
|
|
10
|
+
var _context = require("../theme/context");
|
|
11
|
+
var _style = require("./style");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
/**
|
|
15
|
+
* ActionSheet 基础组件
|
|
16
|
+
*
|
|
17
|
+
* 轻量底部选项面板,Modal + 网格布局。
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
const ActionSheet = ({
|
|
21
|
+
visible,
|
|
22
|
+
onClose,
|
|
23
|
+
options,
|
|
24
|
+
onSelect,
|
|
25
|
+
columns = 3,
|
|
26
|
+
style,
|
|
27
|
+
styles: semanticStyles,
|
|
28
|
+
testID
|
|
29
|
+
}) => {
|
|
30
|
+
const tokens = (0, _context.useTokens)();
|
|
31
|
+
const defaultStyles = (0, _react.useMemo)(() => (0, _style.createDefaultStyles)(tokens), [tokens]);
|
|
32
|
+
const s = (0, _react.useMemo)(() => (0, _hooks.mergeStyles)(defaultStyles, semanticStyles), [defaultStyles, semanticStyles]);
|
|
33
|
+
if (!visible) {
|
|
34
|
+
return null;
|
|
35
|
+
}
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
|
|
37
|
+
visible: visible,
|
|
38
|
+
transparent: true,
|
|
39
|
+
animationType: "slide",
|
|
40
|
+
onRequestClose: onClose,
|
|
41
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
42
|
+
onPress: onClose,
|
|
43
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
44
|
+
style: s.overlay
|
|
45
|
+
})
|
|
46
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
47
|
+
style: [s.panel, style],
|
|
48
|
+
testID: testID,
|
|
49
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
50
|
+
style: s.grid,
|
|
51
|
+
children: options.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
52
|
+
style: [s.option, {
|
|
53
|
+
width: `${Math.floor(100 / columns)}%`
|
|
54
|
+
}],
|
|
55
|
+
onPress: () => onSelect(item.key),
|
|
56
|
+
activeOpacity: 0.7,
|
|
57
|
+
testID: testID ? `${testID}-${item.key}` : undefined,
|
|
58
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
59
|
+
style: s.optionIcon,
|
|
60
|
+
children: item.icon
|
|
61
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
62
|
+
style: s.optionLabel,
|
|
63
|
+
children: item.label
|
|
64
|
+
})]
|
|
65
|
+
}, item.key))
|
|
66
|
+
})
|
|
67
|
+
})]
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
var _default = exports.default = ActionSheet;
|
|
71
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_hooks","_context","_style","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ActionSheet","visible","onClose","options","onSelect","columns","style","styles","semanticStyles","testID","tokens","useTokens","defaultStyles","useMemo","createDefaultStyles","s","mergeStyles","jsxs","Modal","transparent","animationType","onRequestClose","children","jsx","TouchableWithoutFeedback","onPress","View","overlay","panel","grid","map","item","TouchableOpacity","option","width","Math","floor","key","activeOpacity","undefined","optionIcon","icon","Text","optionLabel","label","_default","exports"],"sourceRoot":"../../../src","sources":["action-sheet/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: ActionSheet
|
|
3
|
+
nav:
|
|
4
|
+
title: 组件
|
|
5
|
+
order: 1
|
|
6
|
+
group:
|
|
7
|
+
title: 基础
|
|
8
|
+
order: 2
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# ActionSheet 底部操作面板
|
|
12
|
+
|
|
13
|
+
从底部弹出的选项网格面板。
|
|
14
|
+
|
|
15
|
+
## 何时使用
|
|
16
|
+
|
|
17
|
+
- 需要展示操作选项时(如拍照、选照片等)
|
|
18
|
+
- 底部弹出式面板
|
|
19
|
+
|
|
20
|
+
## 代码演示
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { ActionSheet, Icon } from '@unif/react-native-ui';
|
|
24
|
+
|
|
25
|
+
const options = [
|
|
26
|
+
{ key: 'camera', label: '拍照', icon: <Icon name="camera-outline" size={28} /> },
|
|
27
|
+
{ key: 'photo', label: '照片', icon: <Icon name="image-outline" size={28} /> },
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
<ActionSheet
|
|
31
|
+
visible={visible}
|
|
32
|
+
onClose={() => setVisible(false)}
|
|
33
|
+
options={options}
|
|
34
|
+
onSelect={(key) => console.log(key)}
|
|
35
|
+
/>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## API
|
|
39
|
+
|
|
40
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
41
|
+
| -------- | -------------- | ----------------------------------- | ------ |
|
|
42
|
+
| visible | 是否可见 | `boolean` | - |
|
|
43
|
+
| onClose | 关闭回调 | `() => void` | - |
|
|
44
|
+
| title | 标题 | `string` | - |
|
|
45
|
+
| options | 选项列表 | `ActionSheetOption[]` | - |
|
|
46
|
+
| onSelect | 选择回调 | `(key: string) => void` | - |
|
|
47
|
+
| columns | 每行列数 | `number` | `3` |
|
|
48
|
+
| style | 面板样式 | `ViewStyle` | - |
|
|
49
|
+
| styles | 语义样式 | `ActionSheetSemanticStyles` | - |
|
|
50
|
+
| testID | 测试标识 | `string` | - |
|
|
51
|
+
|
|
52
|
+
## ActionSheetOption
|
|
53
|
+
|
|
54
|
+
| 属性 | 说明 | 类型 |
|
|
55
|
+
| ----- | ------ | ----------- |
|
|
56
|
+
| key | 唯一标识 | `string` |
|
|
57
|
+
| label | 显示文本 | `string` |
|
|
58
|
+
| icon | 图标 | `ReactNode` |
|
|
59
|
+
|
|
60
|
+
## Semantic Styles
|
|
61
|
+
|
|
62
|
+
| Slot | 说明 |
|
|
63
|
+
| ----------- | -------------- |
|
|
64
|
+
| overlay | 遮罩层 |
|
|
65
|
+
| panel | 底部面板 |
|
|
66
|
+
| grid | 网格容器 |
|
|
67
|
+
| option | 单个选项 |
|
|
68
|
+
| optionIcon | 选项图标容器 |
|
|
69
|
+
| optionLabel | 选项标签文本 |
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createDefaultStyles = void 0;
|
|
7
|
+
const createDefaultStyles = t => ({
|
|
8
|
+
overlay: {
|
|
9
|
+
flex: 1,
|
|
10
|
+
backgroundColor: 'rgba(0,0,0,0.3)'
|
|
11
|
+
},
|
|
12
|
+
panel: {
|
|
13
|
+
backgroundColor: t.colorBgElevated,
|
|
14
|
+
borderTopLeftRadius: 12,
|
|
15
|
+
borderTopRightRadius: 12,
|
|
16
|
+
paddingTop: 20,
|
|
17
|
+
paddingBottom: 24,
|
|
18
|
+
paddingHorizontal: t.spaceMd
|
|
19
|
+
},
|
|
20
|
+
grid: {
|
|
21
|
+
flexDirection: 'row',
|
|
22
|
+
justifyContent: 'space-around'
|
|
23
|
+
},
|
|
24
|
+
option: {
|
|
25
|
+
alignItems: 'center'
|
|
26
|
+
},
|
|
27
|
+
optionIcon: {
|
|
28
|
+
width: 56,
|
|
29
|
+
height: 56,
|
|
30
|
+
borderRadius: 12,
|
|
31
|
+
backgroundColor: t.colorBgPage,
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
marginBottom: t.spaceSm
|
|
35
|
+
},
|
|
36
|
+
optionLabel: {
|
|
37
|
+
fontSize: 12,
|
|
38
|
+
color: t.colorTextSecondary
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
exports.createDefaultStyles = createDefaultStyles;
|
|
42
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createDefaultStyles","t","overlay","flex","backgroundColor","panel","colorBgElevated","borderTopLeftRadius","borderTopRightRadius","paddingTop","paddingBottom","paddingHorizontal","spaceMd","grid","flexDirection","justifyContent","option","alignItems","optionIcon","width","height","borderRadius","colorBgPage","marginBottom","spaceSm","optionLabel","fontSize","color","colorTextSecondary","exports"],"sourceRoot":"../../../../src","sources":["action-sheet/style/index.tsx"],"mappings":";;;;;;AAkBO,MAAMA,mBAAmB,GAC9BC,CAAS,KACsB;EAC/BC,OAAO,EAAE;IACPC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAE;EACnB,CAAC;EACDC,KAAK,EAAE;IACLD,eAAe,EAAEH,CAAC,CAACK,eAAe;IAClCC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE,EAAE;IACxBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,EAAE;IACjBC,iBAAiB,EAAEV,CAAC,CAACW;EACvB,CAAC;EACDC,IAAI,EAAE;IACJC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,MAAM,EAAE;IACNC,UAAU,EAAE;EACd,CAAC;EACDC,UAAU,EAAE;IACVC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,EAAE;IAChBjB,eAAe,EAAEH,CAAC,CAACqB,WAAW;IAC9BP,cAAc,EAAE,QAAQ;IACxBE,UAAU,EAAE,QAAQ;IACpBM,YAAY,EAAEtB,CAAC,CAACuB;EAClB,CAAC;EACDC,WAAW,EAAE;IACXC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAE1B,CAAC,CAAC2B;EACX;AACF,CAAC,CAAC;AAACC,OAAA,CAAA7B,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _hooks = require("../hooks");
|
|
10
|
+
var _context = require("../theme/context");
|
|
11
|
+
var _style = require("./style");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
/**
|
|
15
|
+
* Avatar 原子组件
|
|
16
|
+
*
|
|
17
|
+
* 圆形图像/图标容器,支持图片、图标、占位三种模式。
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
const Avatar = ({
|
|
21
|
+
size = 40,
|
|
22
|
+
source,
|
|
23
|
+
icon,
|
|
24
|
+
style,
|
|
25
|
+
styles: semanticStyles,
|
|
26
|
+
testID
|
|
27
|
+
}) => {
|
|
28
|
+
const tokens = (0, _context.useTokens)();
|
|
29
|
+
const defaultStyles = (0, _react.useMemo)(() => (0, _style.createDefaultStyles)(tokens), [tokens]);
|
|
30
|
+
const s = (0, _react.useMemo)(() => (0, _hooks.mergeStyles)(defaultStyles, semanticStyles), [defaultStyles, semanticStyles]);
|
|
31
|
+
const sizeStyle = {
|
|
32
|
+
width: size,
|
|
33
|
+
height: size,
|
|
34
|
+
borderRadius: size / 2
|
|
35
|
+
};
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
37
|
+
style: [s.root, sizeStyle, style],
|
|
38
|
+
testID: testID,
|
|
39
|
+
children: source ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
|
|
40
|
+
source: source,
|
|
41
|
+
style: [s.image, {
|
|
42
|
+
width: size,
|
|
43
|
+
height: size,
|
|
44
|
+
borderRadius: size / 2
|
|
45
|
+
}]
|
|
46
|
+
}) : icon ? icon : null
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
var _default = exports.default = Avatar;
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_hooks","_context","_style","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Avatar","size","source","icon","style","styles","semanticStyles","testID","tokens","useTokens","defaultStyles","useMemo","createDefaultStyles","s","mergeStyles","sizeStyle","width","height","borderRadius","jsx","View","root","children","Image","image","_default","exports"],"sourceRoot":"../../../src","sources":["avatar/index.tsx"],"mappings":";;;;;;AAMA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAA8C,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAZ9C;AACA;AACA;AACA;AACA;;AAmBA,MAAMkB,MAA6B,GAAGA,CAAC;EACrCC,IAAI,GAAG,EAAE;EACTC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC,MAAM,EAAEC,cAAc;EACtBC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAG,IAAAC,kBAAS,EAAC,CAAC;EAC1B,MAAMC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,0BAAmB,EAACJ,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAE1E,MAAMK,CAAC,GAAG,IAAAF,cAAO,EACf,MAAM,IAAAG,kBAAW,EAAuBJ,aAAa,EAAEJ,cAAc,CAAC,EACtE,CAACI,aAAa,EAAEJ,cAAc,CAChC,CAAC;EAED,MAAMS,SAAoB,GAAG;IAC3BC,KAAK,EAAEf,IAAI;IACXgB,MAAM,EAAEhB,IAAI;IACZiB,YAAY,EAAEjB,IAAI,GAAG;EACvB,CAAC;EAED,oBACE,IAAArB,WAAA,CAAAuC,GAAA,EAAC3C,YAAA,CAAA4C,IAAI;IAAChB,KAAK,EAAE,CAACS,CAAC,CAACQ,IAAI,EAAEN,SAAS,EAAEX,KAAK,CAAE;IAACG,MAAM,EAAEA,MAAO;IAAAe,QAAA,EACrDpB,MAAM,gBACL,IAAAtB,WAAA,CAAAuC,GAAA,EAAC3C,YAAA,CAAA+C,KAAK;MACJrB,MAAM,EAAEA,MAAO;MACfE,KAAK,EAAE,CAACS,CAAC,CAACW,KAAK,EAAE;QAAER,KAAK,EAAEf,IAAI;QAAEgB,MAAM,EAAEhB,IAAI;QAAEiB,YAAY,EAAEjB,IAAI,GAAG;MAAE,CAAC;IAAE,CACzE,CAAC,GACAE,IAAI,GACNA,IAAI,GACF;EAAI,CACJ,CAAC;AAEX,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAAnC,OAAA,GAEaS,MAAM","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Avatar
|
|
3
|
+
nav:
|
|
4
|
+
title: 组件
|
|
5
|
+
order: 1
|
|
6
|
+
group:
|
|
7
|
+
title: 原子
|
|
8
|
+
order: 1
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Avatar 头像
|
|
12
|
+
|
|
13
|
+
圆形图像/图标容器,支持图片、图标、占位三种模式。
|
|
14
|
+
|
|
15
|
+
## 何时使用
|
|
16
|
+
|
|
17
|
+
- 展示用户头像
|
|
18
|
+
- 展示 AI 助手图标头像
|
|
19
|
+
|
|
20
|
+
## 代码演示
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { Avatar, Icon } from '@unif/react-native-ui';
|
|
24
|
+
|
|
25
|
+
// 图片头像
|
|
26
|
+
<Avatar size={40} source={{ uri: 'https://example.com/avatar.png' }} />
|
|
27
|
+
|
|
28
|
+
// 图标头像
|
|
29
|
+
<Avatar size={28} icon={<Icon name="sparkles" size={18} color="#EB6E00" />} />
|
|
30
|
+
|
|
31
|
+
// 默认占位
|
|
32
|
+
<Avatar size={40} />
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## API
|
|
36
|
+
|
|
37
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
38
|
+
| ------- | ---------------- | ---------------------- | ------ |
|
|
39
|
+
| size | 头像尺寸 | `number` | `40` |
|
|
40
|
+
| source | 图片来源 | `ImageSourcePropType` | - |
|
|
41
|
+
| icon | 替代图片的图标 | `ReactNode` | - |
|
|
42
|
+
| style | 容器样式 | `ViewStyle` | - |
|
|
43
|
+
| styles | 语义样式 | `AvatarSemanticStyles` | - |
|
|
44
|
+
| testID | 测试标识 | `string` | - |
|
|
45
|
+
|
|
46
|
+
## Semantic Styles
|
|
47
|
+
|
|
48
|
+
| Slot | 说明 |
|
|
49
|
+
| ----- | ---------- |
|
|
50
|
+
| root | 外层容器 |
|
|
51
|
+
| image | 图片元素 |
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createDefaultStyles = void 0;
|
|
7
|
+
const createDefaultStyles = t => ({
|
|
8
|
+
root: {
|
|
9
|
+
justifyContent: 'center',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
backgroundColor: t.colorBgElevated,
|
|
12
|
+
overflow: 'hidden',
|
|
13
|
+
...t.shadowSm
|
|
14
|
+
},
|
|
15
|
+
image: {
|
|
16
|
+
width: '100%',
|
|
17
|
+
height: '100%'
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
exports.createDefaultStyles = createDefaultStyles;
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createDefaultStyles","t","root","justifyContent","alignItems","backgroundColor","colorBgElevated","overflow","shadowSm","image","width","height","exports"],"sourceRoot":"../../../../src","sources":["avatar/style/index.tsx"],"mappings":";;;;;;AAQO,MAAMA,mBAAmB,GAAIC,CAAS,KAA4B;EACvEC,IAAI,EAAE;IACJC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEJ,CAAC,CAACK,eAAe;IAClCC,QAAQ,EAAE,QAAQ;IAClB,GAAGN,CAAC,CAACO;EACP,CAAC;EACDC,KAAK,EAAE;IACLC,KAAK,EAAE,MAAa;IACpBC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAACC,OAAA,CAAAZ,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _hooks = require("../hooks");
|
|
10
|
+
var _context = require("../theme/context");
|
|
11
|
+
var _style = require("./style");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
/**
|
|
15
|
+
* 按钮组件
|
|
16
|
+
*
|
|
17
|
+
* type + size + semantic styles。
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
const Button = ({
|
|
21
|
+
type = 'primary',
|
|
22
|
+
size = 'default',
|
|
23
|
+
icon,
|
|
24
|
+
disabled,
|
|
25
|
+
block,
|
|
26
|
+
loading,
|
|
27
|
+
onPress,
|
|
28
|
+
style,
|
|
29
|
+
styles: semanticStyles,
|
|
30
|
+
testID,
|
|
31
|
+
children
|
|
32
|
+
}) => {
|
|
33
|
+
const tokens = (0, _context.useTokens)();
|
|
34
|
+
const typeStyles = (0, _react.useMemo)(() => (0, _style.createTypeStyles)(tokens), [tokens]);
|
|
35
|
+
const s = (0, _react.useMemo)(() => (0, _hooks.mergeStyles)(_style.DEFAULT_STYLES, _style.SIZE_STYLES[size], typeStyles[type], disabled ? _style.DISABLED_STYLES : undefined, block ? _style.BLOCK_STYLES : undefined, semanticStyles), [type, size, disabled, block, semanticStyles, typeStyles]);
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
|
|
37
|
+
style: ({
|
|
38
|
+
pressed
|
|
39
|
+
}) => [s.root, pressed && _style.PRESSED_STYLE, style],
|
|
40
|
+
onPress: onPress,
|
|
41
|
+
disabled: disabled || loading,
|
|
42
|
+
testID: testID,
|
|
43
|
+
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
44
|
+
style: s.icon,
|
|
45
|
+
children: icon
|
|
46
|
+
}), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
|
|
47
|
+
color: s.content?.color,
|
|
48
|
+
size: "small",
|
|
49
|
+
style: _style.loadingStyle
|
|
50
|
+
}), typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
51
|
+
style: s.content,
|
|
52
|
+
children: children
|
|
53
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
54
|
+
style: s.content,
|
|
55
|
+
children: children
|
|
56
|
+
})]
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
var _default = exports.default = Button;
|
|
60
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_hooks","_context","_style","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","type","size","icon","disabled","block","loading","onPress","style","styles","semanticStyles","testID","children","tokens","useTokens","typeStyles","useMemo","createTypeStyles","s","mergeStyles","DEFAULT_STYLES","SIZE_STYLES","DISABLED_STYLES","undefined","BLOCK_STYLES","jsxs","Pressable","pressed","root","PRESSED_STYLE","jsx","View","ActivityIndicator","color","content","loadingStyle","Text","_default","exports"],"sourceRoot":"../../../src","sources":["button/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Button 语义化按钮
|
|
2
|
+
|
|
3
|
+
支持 `type` / `size` 变体和 `styles` 语义插槽覆盖。使用 `Pressable` 实现按下态反馈。
|
|
4
|
+
|
|
5
|
+
## 何时使用
|
|
6
|
+
|
|
7
|
+
- 替代 `<TouchableOpacity>` + 手写按钮样式的组合
|
|
8
|
+
- 需要统一按钮风格(主按钮、描边按钮、幽灵按钮)时
|
|
9
|
+
|
|
10
|
+
## 代码演示
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
// 主按钮
|
|
14
|
+
<Button onPress={handleConfirm}>确认下单</Button>
|
|
15
|
+
|
|
16
|
+
// 描边按钮
|
|
17
|
+
<Button type="outline" onPress={handleModify}>修改</Button>
|
|
18
|
+
|
|
19
|
+
// 幽灵按钮
|
|
20
|
+
<Button type="ghost" onPress={handlePush}>推送经销商</Button>
|
|
21
|
+
|
|
22
|
+
// 并排等宽
|
|
23
|
+
<View style={{flexDirection: 'row', gap: 10}}>
|
|
24
|
+
<Button type="outline" block onPress={handleModify}>修改</Button>
|
|
25
|
+
<Button block onPress={handleConfirm}>确认</Button>
|
|
26
|
+
</View>
|
|
27
|
+
|
|
28
|
+
// 带图标
|
|
29
|
+
<Button icon={<Icon name="add" size={16} color="#FFF" />} onPress={handleAdd}>
|
|
30
|
+
添加
|
|
31
|
+
</Button>
|
|
32
|
+
|
|
33
|
+
// 语义插槽覆盖
|
|
34
|
+
<Button
|
|
35
|
+
type="outline"
|
|
36
|
+
onPress={handleAction}
|
|
37
|
+
styles={{root: {borderColor: 'red'}, content: {color: 'red'}}}>
|
|
38
|
+
危险操作
|
|
39
|
+
</Button>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## API
|
|
43
|
+
|
|
44
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
45
|
+
|------|------|------|--------|
|
|
46
|
+
| type | 按钮类型 | `'primary'` \| `'outline'` \| `'ghost'` \| `'danger'` | `'primary'` |
|
|
47
|
+
| size | 按钮大小 | `'default'` \| `'small'` | `'default'` |
|
|
48
|
+
| icon | 左侧图标 | `ReactNode` | - |
|
|
49
|
+
| disabled | 禁用状态 | `boolean` | `false` |
|
|
50
|
+
| block | 撑满父容器(flex: 1) | `boolean` | `false` |
|
|
51
|
+
| loading | 加载状态 | `boolean` | `false` |
|
|
52
|
+
| onPress | 点击回调 | `() => void` | **必填** |
|
|
53
|
+
| style | 外层容器样式 | `ViewStyle` | - |
|
|
54
|
+
| styles | 语义插槽样式 | `Partial<ButtonSemanticStyles>` | - |
|
|
55
|
+
| testID | 测试标识 | `string` | - |
|
|
56
|
+
| children | 按钮内容 | `ReactNode` | **必填** |
|
|
57
|
+
|
|
58
|
+
## Semantic Styles
|
|
59
|
+
|
|
60
|
+
通过 `styles` prop 精确覆盖组件内部各 slot 的样式,不侵入组件结构。
|
|
61
|
+
|
|
62
|
+
| 插槽 | 类型 | 说明 |
|
|
63
|
+
|------|------|------|
|
|
64
|
+
| root | `ViewStyle` | 按钮容器(背景、边框、圆角等) |
|
|
65
|
+
| icon | `ViewStyle` | 图标区域(间距等) |
|
|
66
|
+
| content | `TextStyle` | 文字区域(字号、颜色、字重等) |
|
|
67
|
+
|
|
68
|
+
## Type 规格
|
|
69
|
+
|
|
70
|
+
| type | 背景 | 文字色 | 边框 |
|
|
71
|
+
|------|------|--------|------|
|
|
72
|
+
| primary | colorPrimary | #FFF | 无 |
|
|
73
|
+
| outline | 透明 | colorTextSecondary | colorBorder |
|
|
74
|
+
| ghost | 透明 | colorPrimary | colorPrimary |
|
|
75
|
+
| danger | colorError | #FFF | 无 |
|
|
76
|
+
|
|
77
|
+
## Size 规格
|
|
78
|
+
|
|
79
|
+
| size | paddingVertical | borderRadius | fontSize |
|
|
80
|
+
|------|----------------|--------------|----------|
|
|
81
|
+
| default | 10 | 8 | 14 |
|
|
82
|
+
| small | 6 | 6 | 12 |
|
|
83
|
+
|
|
84
|
+
## 样式合并顺序
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
DEFAULT_STYLES → SIZE_STYLES → TYPE_STYLES → DISABLED_STYLES → BLOCK_STYLES → semanticStyles
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
内部使用 `mergeStyles` + `useMemo` 按 slot 维度合并,仅在 props 变化时重算。
|