@rpg-engine/long-bow 0.4.6 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/SkillProgressBar.d.ts +1 -0
  4. package/dist/long-bow.cjs.development.js +1158 -1130
  5. package/dist/long-bow.cjs.development.js.map +1 -1
  6. package/dist/long-bow.cjs.production.min.js +1 -1
  7. package/dist/long-bow.cjs.production.min.js.map +1 -1
  8. package/dist/long-bow.esm.js +1235 -1207
  9. package/dist/long-bow.esm.js.map +1 -1
  10. package/package.json +100 -100
  11. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  12. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  13. package/src/components/Arrow/SelectArrow.tsx +69 -69
  14. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  15. package/src/components/Arrow/img/arrow01-left.png +0 -0
  16. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  17. package/src/components/Arrow/img/arrow01-right.png +0 -0
  18. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  19. package/src/components/Arrow/img/arrow02-left.png +0 -0
  20. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  21. package/src/components/Arrow/img/arrow02-right.png +0 -0
  22. package/src/components/Button.tsx +40 -40
  23. package/src/components/Character/CharacterSelection.tsx +98 -98
  24. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  25. package/src/components/Chat/Chat.tsx +196 -196
  26. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  27. package/src/components/CheckButton.tsx +65 -65
  28. package/src/components/CircularController/CircularController.tsx +282 -282
  29. package/src/components/CraftBook/CraftBook.tsx +286 -286
  30. package/src/components/CraftBook/CraftingRecipe.tsx +161 -161
  31. package/src/components/CraftBook/MockItems.ts +101 -101
  32. package/src/components/DraggableContainer.tsx +180 -180
  33. package/src/components/DropdownSelectorContainer.tsx +42 -42
  34. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  35. package/src/components/HistoryDialog.tsx +104 -104
  36. package/src/components/Input.tsx +15 -15
  37. package/src/components/InputRadio.tsx +41 -41
  38. package/src/components/Item/Cards/ItemInfo.tsx +298 -298
  39. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  40. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  41. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  42. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  43. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  44. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  45. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  46. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  47. package/src/components/Item/Inventory/ItemSlot.tsx +580 -580
  48. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  49. package/src/components/ListMenu.tsx +63 -63
  50. package/src/components/Marketplace/Marketplace.tsx +132 -132
  51. package/src/components/Marketplace/MarketplaceRows.tsx +171 -171
  52. package/src/components/Marketplace/__mocks__/index.tsx +65 -65
  53. package/src/components/Multitab/Tab.tsx +66 -66
  54. package/src/components/Multitab/TabBody.tsx +13 -13
  55. package/src/components/Multitab/TabsContainer.tsx +97 -97
  56. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  57. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  58. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  59. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  60. package/src/components/ProgressBar.tsx +95 -95
  61. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  62. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  63. package/src/components/QuestList.tsx +135 -135
  64. package/src/components/RPGUIContainer.tsx +47 -47
  65. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  66. package/src/components/RPGUIRoot.tsx +14 -14
  67. package/src/components/RadioButton.tsx +53 -53
  68. package/src/components/RadioInput/RadioButton.tsx +96 -96
  69. package/src/components/RadioInput/RadioInput.tsx +102 -102
  70. package/src/components/RadioInput/instruments.ts +15 -15
  71. package/src/components/RangeSlider.tsx +78 -78
  72. package/src/components/RelativeListMenu.tsx +90 -90
  73. package/src/components/ScrollList.tsx +79 -79
  74. package/src/components/Shortcuts/Shortcuts.tsx +193 -193
  75. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  76. package/src/components/Shortcuts/SingleShortcut.ts +82 -82
  77. package/src/components/Shortcuts/useShortcutCooldown.ts +23 -23
  78. package/src/components/SimpleProgressBar.tsx +62 -62
  79. package/src/components/SkillProgressBar.tsx +198 -133
  80. package/src/components/SkillsContainer.tsx +213 -212
  81. package/src/components/Spellbook/Spell.tsx +236 -236
  82. package/src/components/Spellbook/Spellbook.tsx +161 -161
  83. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -137
  84. package/src/components/Spellbook/cards/SpellInfo.tsx +134 -134
  85. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -31
  86. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -48
  87. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -70
  88. package/src/components/Spellbook/constants.ts +7 -7
  89. package/src/components/Spellbook/mockSpells.ts +84 -84
  90. package/src/components/StaticBook/StaticBook.tsx +103 -103
  91. package/src/components/TextArea.tsx +11 -11
  92. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  93. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  94. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  95. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  96. package/src/components/TradingMenu/items.mock.ts +48 -48
  97. package/src/components/Truncate.tsx +25 -25
  98. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  99. package/src/components/shared/Column.tsx +16 -16
  100. package/src/components/shared/Ellipsis.tsx +68 -68
  101. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  102. package/src/components/typography/DynamicText.tsx +49 -49
  103. package/src/constants/uiColors.ts +20 -20
  104. package/src/constants/uiDevices.ts +3 -3
  105. package/src/constants/uiFonts.ts +12 -12
  106. package/src/hooks/useEventListener.ts +21 -21
  107. package/src/hooks/useOutsideAlerter.ts +25 -25
  108. package/src/index.tsx +42 -42
  109. package/src/libs/CastingTypeHelper.ts +7 -7
  110. package/src/libs/StringHelpers.ts +3 -3
  111. package/src/libs/itemCounter.ts +21 -21
  112. package/src/mocks/atlas/entities/entities.json +20215 -20215
  113. package/src/mocks/atlas/icons/icons.json +735 -735
  114. package/src/mocks/atlas/items/items.json +12086 -12086
  115. package/src/mocks/equipmentSet.mocks.ts +391 -391
  116. package/src/mocks/itemContainer.mocks.ts +605 -605
  117. package/src/mocks/skills.mocks.ts +130 -128
  118. package/src/stories/Arrow.stories.tsx +26 -26
  119. package/src/stories/Button.stories.tsx +36 -36
  120. package/src/stories/CharacterSelection.stories.tsx +44 -44
  121. package/src/stories/CharacterStatus.stories.tsx +29 -29
  122. package/src/stories/Chat.stories.tsx +187 -187
  123. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  124. package/src/stories/CheckButton.stories.tsx +48 -48
  125. package/src/stories/CircullarController.stories.tsx +37 -37
  126. package/src/stories/CraftBook.stories.tsx +42 -42
  127. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  128. package/src/stories/DraggableContainer.stories.tsx +28 -28
  129. package/src/stories/Dropdown.stories.tsx +46 -46
  130. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  131. package/src/stories/EquipmentSet.stories.tsx +65 -65
  132. package/src/stories/HistoryDialog.stories.tsx +61 -61
  133. package/src/stories/ItemContainer.stories.tsx +201 -201
  134. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  135. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  136. package/src/stories/ItemSelector.stories.tsx +77 -77
  137. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  138. package/src/stories/ListMenu.stories.tsx +56 -56
  139. package/src/stories/Marketplace.stories.tsx +42 -42
  140. package/src/stories/MarketplaceRows.stories.tsx +28 -28
  141. package/src/stories/Multitab.stories.tsx +51 -51
  142. package/src/stories/NPCDialog.stories.tsx +130 -130
  143. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  144. package/src/stories/ProgressBar.stories.tsx +23 -23
  145. package/src/stories/PropertySelect.stories.tsx +40 -40
  146. package/src/stories/QuestInfo.stories.tsx +107 -107
  147. package/src/stories/QuestList.stories.tsx +82 -82
  148. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  149. package/src/stories/RadioButton.stories.tsx +49 -49
  150. package/src/stories/RadioInput.stories.tsx +34 -34
  151. package/src/stories/RangeSlider.stories.tsx +64 -64
  152. package/src/stories/ScrollList.stories.tsx +85 -85
  153. package/src/stories/Shortcuts.stories.tsx +39 -39
  154. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  155. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  156. package/src/stories/SkillsContainer.stories.tsx +35 -35
  157. package/src/stories/SpellInfoDisplay.stories.tsx +27 -27
  158. package/src/stories/Spellbook.stories.tsx +104 -104
  159. package/src/stories/StaticBook.stories.tsx +32 -32
  160. package/src/stories/Text.stories.tsx +42 -42
  161. package/src/stories/TimeWidget.stories.tsx +27 -27
  162. package/src/stories/TradingMenu.stories.tsx +47 -47
  163. package/src/types/eventTypes.ts +4 -4
  164. package/src/types/index.d.ts +2 -2
package/package.json CHANGED
@@ -1,100 +1,100 @@
1
- {
2
- "name": "@rpg-engine/long-bow",
3
- "version": "0.4.6",
4
- "license": "MIT",
5
- "main": "dist/index.js",
6
- "typings": "dist/index.d.ts",
7
- "publishConfig": {
8
- "access": "public"
9
- },
10
- "directories": {
11
- "dist": "dist",
12
- "src": "src"
13
- },
14
- "files": [
15
- "dist",
16
- "src"
17
- ],
18
- "engines": {
19
- "node": ">=10"
20
- },
21
- "scripts": {
22
- "dev": "yarn install && start-storybook -p 6006",
23
- "start": "tsdx watch",
24
- "build": "tsdx build",
25
- "test": "tsdx test --passWithNoTests",
26
- "lint": "tsdx lint",
27
- "prepare": "tsdx build",
28
- "size": "size-limit",
29
- "analyze": "size-limit --why",
30
- "storybook": "start-storybook -p 6006",
31
- "build-storybook": "build-storybook",
32
- "configure": "./environment/download-credentials.sh",
33
- "update:shared-deps": "yarn add @rpg-engine/shared"
34
- },
35
- "peerDependencies": {
36
- "react": ">=16"
37
- },
38
- "prettier": {
39
- "printWidth": 80,
40
- "semi": true,
41
- "singleQuote": true,
42
- "trailingComma": "es5"
43
- },
44
- "author": "Joao Paulo Furtado",
45
- "module": "dist/long-bow.esm.js",
46
- "size-limit": [
47
- {
48
- "path": "dist/long-bow.cjs.production.min.js",
49
- "limit": "10 KB"
50
- },
51
- {
52
- "path": "dist/long-bow.esm.js",
53
- "limit": "10 KB"
54
- }
55
- ],
56
- "devDependencies": {
57
- "@babel/core": "^7.17.7",
58
- "@size-limit/preset-small-lib": "^7.0.8",
59
- "@storybook/addon-essentials": "^6.5.10",
60
- "@storybook/addon-info": "^5.3.21",
61
- "@storybook/addon-links": "^6.5.10",
62
- "@storybook/addons": "^6.5.10",
63
- "@storybook/react": "^6.5.10",
64
- "@types/react": "^18.0.14",
65
- "@types/react-dom": "^18.0.5",
66
- "@types/styled-components": "^5.1.24",
67
- "@types/uuid": "^8.3.4",
68
- "babel-loader": "^8.2.3",
69
- "babel-plugin-styled-components": "^2.0.6",
70
- "husky": "^7.0.4",
71
- "pretty-quick": "^3.1.3",
72
- "react": "^17.0.2",
73
- "react-dom": "^17.0.2",
74
- "react-is": "^17.0.2",
75
- "rollup-plugin-image-base64": "^1.0.0",
76
- "size-limit": "^7.0.8",
77
- "storybook-dark-mode": "^1.1.0",
78
- "styled-components": "^5.3.3",
79
- "tsdx": "^0.14.1",
80
- "tslib": "^2.3.1",
81
- "typescript": "^4.6.2",
82
- "uuid": "^8.3.2"
83
- },
84
- "dependencies": {
85
- "@rollup/plugin-image": "^2.1.1",
86
- "@rpg-engine/shared": "^0.8.1",
87
- "dayjs": "^1.11.2",
88
- "font-awesome": "^4.7.0",
89
- "fs-extra": "^10.1.0",
90
- "lodash": "^4.17.21",
91
- "lodash-es": "^4.17.21",
92
- "mobx": "^6.6.0",
93
- "mobx-react": "^7.5.0",
94
- "react-draggable": "^4.4.5",
95
- "react-error-boundary": "^3.1.4",
96
- "react-icons": "^4.7.1",
97
- "rollup-plugin-image-files": "^1.4.2",
98
- "rpgui": "^1.0.3"
99
- }
100
- }
1
+ {
2
+ "name": "@rpg-engine/long-bow",
3
+ "version": "0.4.7",
4
+ "license": "MIT",
5
+ "main": "dist/index.js",
6
+ "typings": "dist/index.d.ts",
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "directories": {
11
+ "dist": "dist",
12
+ "src": "src"
13
+ },
14
+ "files": [
15
+ "dist",
16
+ "src"
17
+ ],
18
+ "engines": {
19
+ "node": ">=10"
20
+ },
21
+ "scripts": {
22
+ "dev": "yarn install && start-storybook -p 6006",
23
+ "start": "tsdx watch",
24
+ "build": "tsdx build",
25
+ "test": "tsdx test --passWithNoTests",
26
+ "lint": "tsdx lint",
27
+ "prepare": "tsdx build",
28
+ "size": "size-limit",
29
+ "analyze": "size-limit --why",
30
+ "storybook": "start-storybook -p 6006",
31
+ "build-storybook": "build-storybook",
32
+ "configure": "./environment/download-credentials.sh",
33
+ "update:shared-deps": "yarn add @rpg-engine/shared"
34
+ },
35
+ "peerDependencies": {
36
+ "react": ">=16"
37
+ },
38
+ "prettier": {
39
+ "printWidth": 80,
40
+ "semi": true,
41
+ "singleQuote": true,
42
+ "trailingComma": "es5"
43
+ },
44
+ "author": "Joao Paulo Furtado",
45
+ "module": "dist/long-bow.esm.js",
46
+ "size-limit": [
47
+ {
48
+ "path": "dist/long-bow.cjs.production.min.js",
49
+ "limit": "10 KB"
50
+ },
51
+ {
52
+ "path": "dist/long-bow.esm.js",
53
+ "limit": "10 KB"
54
+ }
55
+ ],
56
+ "devDependencies": {
57
+ "@babel/core": "^7.17.7",
58
+ "@size-limit/preset-small-lib": "^7.0.8",
59
+ "@storybook/addon-essentials": "^6.5.10",
60
+ "@storybook/addon-info": "^5.3.21",
61
+ "@storybook/addon-links": "^6.5.10",
62
+ "@storybook/addons": "^6.5.10",
63
+ "@storybook/react": "^6.5.10",
64
+ "@types/react": "^18.0.14",
65
+ "@types/react-dom": "^18.0.5",
66
+ "@types/styled-components": "^5.1.24",
67
+ "@types/uuid": "^8.3.4",
68
+ "babel-loader": "^8.2.3",
69
+ "babel-plugin-styled-components": "^2.0.6",
70
+ "husky": "^7.0.4",
71
+ "pretty-quick": "^3.1.3",
72
+ "react": "^17.0.2",
73
+ "react-dom": "^17.0.2",
74
+ "react-is": "^17.0.2",
75
+ "rollup-plugin-image-base64": "^1.0.0",
76
+ "size-limit": "^7.0.8",
77
+ "storybook-dark-mode": "^1.1.0",
78
+ "styled-components": "^5.3.3",
79
+ "tsdx": "^0.14.1",
80
+ "tslib": "^2.3.1",
81
+ "typescript": "^4.6.2",
82
+ "uuid": "^8.3.2"
83
+ },
84
+ "dependencies": {
85
+ "@rollup/plugin-image": "^2.1.1",
86
+ "@rpg-engine/shared": "^0.8.11",
87
+ "dayjs": "^1.11.2",
88
+ "font-awesome": "^4.7.0",
89
+ "fs-extra": "^10.1.0",
90
+ "lodash": "^4.17.21",
91
+ "lodash-es": "^4.17.21",
92
+ "mobx": "^6.6.0",
93
+ "mobx-react": "^7.5.0",
94
+ "react-draggable": "^4.4.5",
95
+ "react-error-boundary": "^3.1.4",
96
+ "react-icons": "^4.7.1",
97
+ "rollup-plugin-image-files": "^1.4.2",
98
+ "rpgui": "^1.0.3"
99
+ }
100
+ }
@@ -1,22 +1,22 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import styled from 'styled-components';
4
-
5
- const modalRoot = document.getElementById('modal-root')!;
6
-
7
- interface ModalPortalProps {
8
- children: React.ReactNode;
9
- }
10
-
11
- const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
12
- return ReactDOM.createPortal(
13
- <Container className="rpgui-content">{children}</Container>,
14
- modalRoot
15
- );
16
- };
17
-
18
- const Container = styled.div`
19
- position: static !important;
20
- `;
21
-
22
- export default ModalPortal;
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ import styled from 'styled-components';
4
+
5
+ const modalRoot = document.getElementById('modal-root')!;
6
+
7
+ interface ModalPortalProps {
8
+ children: React.ReactNode;
9
+ }
10
+
11
+ const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
12
+ return ReactDOM.createPortal(
13
+ <Container className="rpgui-content">{children}</Container>,
14
+ modalRoot
15
+ );
16
+ };
17
+
18
+ const Container = styled.div`
19
+ position: static !important;
20
+ `;
21
+
22
+ export default ModalPortal;
@@ -1,62 +1,62 @@
1
- import React from 'react';
2
- import { IPosition } from '../../types/eventTypes';
3
- import { DraggableContainer } from '../DraggableContainer';
4
- import { RPGUIContainerTypes } from '../RPGUIContainer';
5
-
6
- interface IProps {
7
- children: React.ReactNode;
8
- title: string;
9
- onClose?: () => void;
10
- onPositionChange?: (position: IPosition) => void;
11
- onPositionChangeEnd?: (position: IPosition) => void;
12
- onPositionChangeStart?: (position: IPosition) => void;
13
- onOutsideClick?: () => void;
14
- initialPosition?: IPosition;
15
- scale?: number;
16
- }
17
-
18
- export const SlotsContainer: React.FC<IProps> = ({
19
- children,
20
- title,
21
- onClose,
22
- onPositionChange,
23
- onPositionChangeEnd,
24
- onPositionChangeStart,
25
- onOutsideClick,
26
- initialPosition,
27
- scale,
28
- }) => {
29
- return (
30
- <DraggableContainer
31
- title={title}
32
- type={RPGUIContainerTypes.Framed}
33
- onCloseButton={() => {
34
- if (onClose) {
35
- onClose();
36
- }
37
- }}
38
- width="400px"
39
- cancelDrag=".item-container-body, #shortcuts_list"
40
- onPositionChange={({ x, y }) => {
41
- if (onPositionChange) {
42
- onPositionChange({ x, y });
43
- }
44
- }}
45
- onPositionChangeEnd={({ x, y }) => {
46
- if (onPositionChangeEnd) {
47
- onPositionChangeEnd({ x, y });
48
- }
49
- }}
50
- onPositionChangeStart={({ x, y }) => {
51
- if (onPositionChangeStart) {
52
- onPositionChangeStart({ x, y });
53
- }
54
- }}
55
- onOutsideClick={onOutsideClick}
56
- initialPosition={initialPosition}
57
- scale={scale}
58
- >
59
- {children}
60
- </DraggableContainer>
61
- );
62
- };
1
+ import React from 'react';
2
+ import { IPosition } from '../../types/eventTypes';
3
+ import { DraggableContainer } from '../DraggableContainer';
4
+ import { RPGUIContainerTypes } from '../RPGUIContainer';
5
+
6
+ interface IProps {
7
+ children: React.ReactNode;
8
+ title: string;
9
+ onClose?: () => void;
10
+ onPositionChange?: (position: IPosition) => void;
11
+ onPositionChangeEnd?: (position: IPosition) => void;
12
+ onPositionChangeStart?: (position: IPosition) => void;
13
+ onOutsideClick?: () => void;
14
+ initialPosition?: IPosition;
15
+ scale?: number;
16
+ }
17
+
18
+ export const SlotsContainer: React.FC<IProps> = ({
19
+ children,
20
+ title,
21
+ onClose,
22
+ onPositionChange,
23
+ onPositionChangeEnd,
24
+ onPositionChangeStart,
25
+ onOutsideClick,
26
+ initialPosition,
27
+ scale,
28
+ }) => {
29
+ return (
30
+ <DraggableContainer
31
+ title={title}
32
+ type={RPGUIContainerTypes.Framed}
33
+ onCloseButton={() => {
34
+ if (onClose) {
35
+ onClose();
36
+ }
37
+ }}
38
+ width="400px"
39
+ cancelDrag=".item-container-body, #shortcuts_list"
40
+ onPositionChange={({ x, y }) => {
41
+ if (onPositionChange) {
42
+ onPositionChange({ x, y });
43
+ }
44
+ }}
45
+ onPositionChangeEnd={({ x, y }) => {
46
+ if (onPositionChangeEnd) {
47
+ onPositionChangeEnd({ x, y });
48
+ }
49
+ }}
50
+ onPositionChangeStart={({ x, y }) => {
51
+ if (onPositionChangeStart) {
52
+ onPositionChangeStart({ x, y });
53
+ }
54
+ }}
55
+ onOutsideClick={onOutsideClick}
56
+ initialPosition={initialPosition}
57
+ scale={scale}
58
+ >
59
+ {children}
60
+ </DraggableContainer>
61
+ );
62
+ };
@@ -1,69 +1,69 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
4
- import LeftArrowIcon from './img/arrow01-left.png';
5
- import RightArrowClickIcon from './img/arrow01-right-clicked.png';
6
- import RightArrowIcon from './img/arrow01-right.png';
7
-
8
- export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
9
- direction: 'right' | 'left';
10
- onPointerDown: () => void;
11
- size?: number;
12
- }
13
-
14
- export const SelectArrow: React.FC<ArrowBarProps> = ({
15
- direction = 'left',
16
- size,
17
- onPointerDown,
18
- ...props
19
- }) => {
20
- return (
21
- <>
22
- {direction === 'left' ? (
23
- <LeftArrow
24
- size={size}
25
- onPointerDown={() => onPointerDown()}
26
- {...props}
27
- ></LeftArrow>
28
- ) : (
29
- <RightArrow
30
- size={size}
31
- onPointerDown={() => onPointerDown()}
32
- {...props}
33
- ></RightArrow>
34
- )}
35
- </>
36
- );
37
- };
38
-
39
- interface IArrowProps {
40
- size?: number;
41
- }
42
-
43
- const LeftArrow = styled.span<IArrowProps>`
44
- background-image: url(${LeftArrowIcon});
45
- background-size: 100% 100%;
46
- left: 0;
47
- position: absolute;
48
- width: ${props => props.size || 40}px;
49
- height: ${props => props.size || 42}px;
50
- :active {
51
- background-image: url(${LeftArrowClickIcon});
52
- }
53
- z-index: 2;
54
- `;
55
-
56
- const RightArrow = styled.span<IArrowProps>`
57
- background-image: url(${RightArrowIcon});
58
- right: 0;
59
- position: absolute;
60
- width: ${props => props.size || 40}px;
61
- height: ${props => props.size || 42}px;
62
- background-size: 100% 100%;
63
- :active {
64
- background-image: url(${RightArrowClickIcon});
65
- }
66
- z-index: 2;
67
- `;
68
-
69
- export default SelectArrow;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
4
+ import LeftArrowIcon from './img/arrow01-left.png';
5
+ import RightArrowClickIcon from './img/arrow01-right-clicked.png';
6
+ import RightArrowIcon from './img/arrow01-right.png';
7
+
8
+ export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ direction: 'right' | 'left';
10
+ onPointerDown: () => void;
11
+ size?: number;
12
+ }
13
+
14
+ export const SelectArrow: React.FC<ArrowBarProps> = ({
15
+ direction = 'left',
16
+ size,
17
+ onPointerDown,
18
+ ...props
19
+ }) => {
20
+ return (
21
+ <>
22
+ {direction === 'left' ? (
23
+ <LeftArrow
24
+ size={size}
25
+ onPointerDown={() => onPointerDown()}
26
+ {...props}
27
+ ></LeftArrow>
28
+ ) : (
29
+ <RightArrow
30
+ size={size}
31
+ onPointerDown={() => onPointerDown()}
32
+ {...props}
33
+ ></RightArrow>
34
+ )}
35
+ </>
36
+ );
37
+ };
38
+
39
+ interface IArrowProps {
40
+ size?: number;
41
+ }
42
+
43
+ const LeftArrow = styled.span<IArrowProps>`
44
+ background-image: url(${LeftArrowIcon});
45
+ background-size: 100% 100%;
46
+ left: 0;
47
+ position: absolute;
48
+ width: ${props => props.size || 40}px;
49
+ height: ${props => props.size || 42}px;
50
+ :active {
51
+ background-image: url(${LeftArrowClickIcon});
52
+ }
53
+ z-index: 2;
54
+ `;
55
+
56
+ const RightArrow = styled.span<IArrowProps>`
57
+ background-image: url(${RightArrowIcon});
58
+ right: 0;
59
+ position: absolute;
60
+ width: ${props => props.size || 40}px;
61
+ height: ${props => props.size || 42}px;
62
+ background-size: 100% 100%;
63
+ :active {
64
+ background-image: url(${RightArrowClickIcon});
65
+ }
66
+ z-index: 2;
67
+ `;
68
+
69
+ export default SelectArrow;
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -1,40 +1,40 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { uiFonts } from '../constants/uiFonts';
4
-
5
- export enum ButtonTypes {
6
- RPGUIButton = 'rpgui-button',
7
- RPGUIGoldButton = 'rpgui-button golden',
8
- }
9
-
10
- export interface IButtonProps
11
- extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
- disabled?: boolean;
13
- children: React.ReactNode;
14
- buttonType: ButtonTypes;
15
- onPointerDown?: (e: any) => void;
16
- }
17
-
18
- export const Button = ({
19
- disabled = false,
20
- children,
21
- buttonType,
22
- onPointerDown,
23
- ...props
24
- }: IButtonProps) => {
25
- return (
26
- <ButtonContainer
27
- className={`${buttonType}`}
28
- disabled={disabled}
29
- {...props}
30
- onPointerDown={onPointerDown}
31
- >
32
- <p>{children}</p>
33
- </ButtonContainer>
34
- );
35
- };
36
-
37
- const ButtonContainer = styled.button`
38
- height: 45px;
39
- font-size: ${uiFonts.size.small};
40
- `;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { uiFonts } from '../constants/uiFonts';
4
+
5
+ export enum ButtonTypes {
6
+ RPGUIButton = 'rpgui-button',
7
+ RPGUIGoldButton = 'rpgui-button golden',
8
+ }
9
+
10
+ export interface IButtonProps
11
+ extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ disabled?: boolean;
13
+ children: React.ReactNode;
14
+ buttonType: ButtonTypes;
15
+ onPointerDown?: (e: any) => void;
16
+ }
17
+
18
+ export const Button = ({
19
+ disabled = false,
20
+ children,
21
+ buttonType,
22
+ onPointerDown,
23
+ ...props
24
+ }: IButtonProps) => {
25
+ return (
26
+ <ButtonContainer
27
+ className={`${buttonType}`}
28
+ disabled={disabled}
29
+ {...props}
30
+ onPointerDown={onPointerDown}
31
+ >
32
+ <p>{children}</p>
33
+ </ButtonContainer>
34
+ );
35
+ };
36
+
37
+ const ButtonContainer = styled.button`
38
+ height: 45px;
39
+ font-size: ${uiFonts.size.small};
40
+ `;