@rpg-engine/long-bow 0.3.76 → 0.3.77

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 (160) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/CraftBook/CraftBook.d.ts +1 -3
  4. package/dist/components/Item/Cards/ItemTooltip.d.ts +4 -7
  5. package/dist/components/Item/Inventory/ItemContainer.d.ts +1 -2
  6. package/dist/components/Item/Inventory/ItemSlot.d.ts +1 -4
  7. package/dist/components/TradingMenu/TradingItemRow.d.ts +1 -3
  8. package/dist/components/TradingMenu/TradingMenu.d.ts +4 -6
  9. package/dist/components/shared/SpriteFromAtlas.d.ts +0 -1
  10. package/dist/long-bow.cjs.development.js +1029 -1420
  11. package/dist/long-bow.cjs.development.js.map +1 -1
  12. package/dist/long-bow.cjs.production.min.js +1 -1
  13. package/dist/long-bow.cjs.production.min.js.map +1 -1
  14. package/dist/long-bow.esm.js +1032 -1421
  15. package/dist/long-bow.esm.js.map +1 -1
  16. package/dist/stories/TradingMenu.stories.d.ts +2 -2
  17. package/package.json +100 -100
  18. package/src/components/Abstractions/SlotsContainer.tsx +45 -45
  19. package/src/components/Arrow/SelectArrow.tsx +69 -69
  20. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  21. package/src/components/Arrow/img/arrow01-left.png +0 -0
  22. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  23. package/src/components/Arrow/img/arrow01-right.png +0 -0
  24. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  25. package/src/components/Arrow/img/arrow02-left.png +0 -0
  26. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  27. package/src/components/Arrow/img/arrow02-right.png +0 -0
  28. package/src/components/Button.tsx +40 -40
  29. package/src/components/Character/CharacterSelection.tsx +96 -96
  30. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  31. package/src/components/Chat/Chat.tsx +195 -195
  32. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  33. package/src/components/CheckButton.tsx +65 -65
  34. package/src/components/CircularController/CircularController.tsx +248 -248
  35. package/src/components/CraftBook/CraftBook.tsx +227 -240
  36. package/src/components/CraftBook/MockItems.ts +251 -246
  37. package/src/components/DraggableContainer.tsx +153 -153
  38. package/src/components/Dropdown.tsx +90 -90
  39. package/src/components/DropdownSelectorContainer.tsx +42 -42
  40. package/src/components/Equipment/EquipmentSet.tsx +190 -190
  41. package/src/components/HistoryDialog.tsx +104 -104
  42. package/src/components/Input.tsx +15 -15
  43. package/src/components/Item/Cards/ItemTooltip.tsx +33 -85
  44. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  45. package/src/components/Item/Inventory/ItemContainer.tsx +210 -214
  46. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  47. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  48. package/src/components/Item/Inventory/ItemSlot.tsx +501 -540
  49. package/src/components/Item/Inventory/itemContainerHelper.ts +156 -156
  50. package/src/components/ListMenu.tsx +63 -63
  51. package/src/components/Multitab/Tab.tsx +66 -66
  52. package/src/components/Multitab/TabBody.tsx +13 -13
  53. package/src/components/Multitab/TabsContainer.tsx +97 -97
  54. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  55. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  56. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  57. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  58. package/src/components/ProgressBar.tsx +92 -92
  59. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  60. package/src/components/QuestInfo/QuestInfo.tsx +230 -230
  61. package/src/components/QuestList.tsx +129 -129
  62. package/src/components/RPGUIContainer.tsx +47 -47
  63. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  64. package/src/components/RPGUIRoot.tsx +14 -14
  65. package/src/components/RadioButton.tsx +53 -53
  66. package/src/components/RadioInput/RadioButton.tsx +96 -96
  67. package/src/components/RadioInput/RadioInput.tsx +102 -102
  68. package/src/components/RadioInput/instruments.ts +15 -15
  69. package/src/components/RangeSlider.tsx +78 -78
  70. package/src/components/RelativeListMenu.tsx +83 -83
  71. package/src/components/ScrollList.tsx +79 -79
  72. package/src/components/Shortcuts/Shortcuts.tsx +151 -151
  73. package/src/components/Shortcuts/ShortcutsSetter.tsx +132 -132
  74. package/src/components/Shortcuts/SingleShortcut.ts +62 -62
  75. package/src/components/SimpleProgressBar.tsx +62 -62
  76. package/src/components/SkillProgressBar.tsx +133 -133
  77. package/src/components/SkillsContainer.tsx +200 -200
  78. package/src/components/Spellbook/Spell.tsx +201 -201
  79. package/src/components/Spellbook/Spellbook.tsx +150 -150
  80. package/src/components/Spellbook/constants.ts +8 -8
  81. package/src/components/Spellbook/mockSpells.ts +60 -60
  82. package/src/components/StaticBook/StaticBook.tsx +103 -103
  83. package/src/components/TextArea.tsx +11 -11
  84. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  85. package/src/components/TimeWidget/TimeWidget.tsx +63 -63
  86. package/src/components/TradingMenu/TradingItemRow.tsx +181 -198
  87. package/src/components/TradingMenu/TradingMenu.tsx +203 -215
  88. package/src/components/TradingMenu/items.mock.ts +96 -48
  89. package/src/components/Truncate.tsx +25 -25
  90. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  91. package/src/components/shared/Column.tsx +16 -16
  92. package/src/components/shared/Ellipsis.tsx +65 -65
  93. package/src/components/shared/SpriteFromAtlas.tsx +102 -104
  94. package/src/components/typography/DynamicText.tsx +49 -49
  95. package/src/constants/uiColors.ts +20 -20
  96. package/src/constants/uiDevices.ts +3 -3
  97. package/src/constants/uiFonts.ts +12 -12
  98. package/src/hooks/useEventListener.ts +21 -21
  99. package/src/hooks/useOutsideAlerter.ts +25 -25
  100. package/src/index.tsx +40 -40
  101. package/src/libs/StringHelpers.ts +3 -3
  102. package/src/mocks/atlas/entities/entities.json +20215 -20215
  103. package/src/mocks/atlas/icons/icons.json +735 -735
  104. package/src/mocks/atlas/items/items.json +12086 -12086
  105. package/src/mocks/equipmentSet.mocks.ts +393 -391
  106. package/src/mocks/itemContainer.mocks.ts +562 -563
  107. package/src/mocks/skills.mocks.ts +128 -128
  108. package/src/stories/Arrow.stories.tsx +26 -26
  109. package/src/stories/Button.stories.tsx +36 -36
  110. package/src/stories/CharacterSelection.stories.tsx +45 -45
  111. package/src/stories/CharacterStatus.stories.tsx +29 -29
  112. package/src/stories/Chat.stories.tsx +187 -187
  113. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  114. package/src/stories/CheckButton.stories.tsx +48 -48
  115. package/src/stories/CircullarController.stories.tsx +37 -37
  116. package/src/stories/CraftBook.stories.tsx +40 -42
  117. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  118. package/src/stories/DraggableContainer.stories.tsx +28 -28
  119. package/src/stories/Dropdown.stories.tsx +46 -46
  120. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  121. package/src/stories/EquipmentSet.stories.tsx +65 -65
  122. package/src/stories/HistoryDialog.stories.tsx +61 -61
  123. package/src/stories/ItemContainer.stories.tsx +198 -200
  124. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  125. package/src/stories/ItemSelector.stories.tsx +77 -77
  126. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  127. package/src/stories/ListMenu.stories.tsx +56 -56
  128. package/src/stories/Multitab.stories.tsx +51 -51
  129. package/src/stories/NPCDialog.stories.tsx +130 -130
  130. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  131. package/src/stories/ProgressBar.stories.tsx +23 -23
  132. package/src/stories/PropertySelect.stories.tsx +40 -40
  133. package/src/stories/QuestInfo.stories.tsx +107 -107
  134. package/src/stories/QuestList.stories.tsx +82 -82
  135. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  136. package/src/stories/RadioButton.stories.tsx +49 -49
  137. package/src/stories/RadioInput.stories.tsx +34 -34
  138. package/src/stories/RangeSlider.stories.tsx +64 -64
  139. package/src/stories/ScrollList.stories.tsx +85 -85
  140. package/src/stories/Shortcuts.stories.tsx +39 -39
  141. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  142. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  143. package/src/stories/SkillsContainer.stories.tsx +35 -35
  144. package/src/stories/Spellbook.stories.tsx +104 -104
  145. package/src/stories/StaticBook.stories.tsx +32 -32
  146. package/src/stories/Text.stories.tsx +42 -42
  147. package/src/stories/TimeWidget.stories.tsx +27 -27
  148. package/src/stories/TradingMenu.stories.tsx +45 -47
  149. package/src/types/eventTypes.ts +4 -4
  150. package/src/types/index.d.ts +2 -2
  151. package/dist/components/Item/Cards/ItemInfo.d.ts +0 -10
  152. package/dist/components/Item/Cards/ItemInfoDisplay.d.ts +0 -10
  153. package/dist/components/Item/Cards/ItemInfoWrapper.d.ts +0 -12
  154. package/dist/components/Item/Cards/MobileItemTooltip.d.ts +0 -18
  155. package/dist/stories/ItemInfoDisplay.stories.d.ts +0 -8
  156. package/src/components/Item/Cards/ItemInfo.tsx +0 -248
  157. package/src/components/Item/Cards/ItemInfoDisplay.tsx +0 -123
  158. package/src/components/Item/Cards/ItemInfoWrapper.tsx +0 -62
  159. package/src/components/Item/Cards/MobileItemTooltip.tsx +0 -105
  160. package/src/stories/ItemInfoDisplay.stories.tsx +0 -33
@@ -1,5 +1,5 @@
1
1
  import { Meta } from '@storybook/react';
2
- import { ITradingMenu } from '../components/TradingMenu/TradingMenu';
2
+ import { ITrandingMenu } from '../components/TradingMenu/TradingMenu';
3
3
  declare const meta: Meta;
4
4
  export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITradingMenu>;
5
+ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITrandingMenu>;
package/package.json CHANGED
@@ -1,100 +1,100 @@
1
- {
2
- "name": "@rpg-engine/long-bow",
3
- "version": "0.3.76",
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.6.94",
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.3.77",
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.6.95",
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,45 +1,45 @@
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
- onOutsideClick?: () => void;
12
- initialPosition?: IPosition;
13
- }
14
-
15
- export const SlotsContainer: React.FC<IProps> = ({
16
- children,
17
- title,
18
- onClose,
19
- onPositionChange,
20
- onOutsideClick,
21
- initialPosition,
22
- }) => {
23
- return (
24
- <DraggableContainer
25
- title={title}
26
- type={RPGUIContainerTypes.Framed}
27
- onCloseButton={() => {
28
- if (onClose) {
29
- onClose();
30
- }
31
- }}
32
- width="400px"
33
- cancelDrag=".item-container-body, #shortcuts_list"
34
- onPositionChange={({ x, y }) => {
35
- if (onPositionChange) {
36
- onPositionChange({ x, y });
37
- }
38
- }}
39
- onOutsideClick={onOutsideClick}
40
- initialPosition={initialPosition}
41
- >
42
- {children}
43
- </DraggableContainer>
44
- );
45
- };
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
+ onOutsideClick?: () => void;
12
+ initialPosition?: IPosition;
13
+ }
14
+
15
+ export const SlotsContainer: React.FC<IProps> = ({
16
+ children,
17
+ title,
18
+ onClose,
19
+ onPositionChange,
20
+ onOutsideClick,
21
+ initialPosition,
22
+ }) => {
23
+ return (
24
+ <DraggableContainer
25
+ title={title}
26
+ type={RPGUIContainerTypes.Framed}
27
+ onCloseButton={() => {
28
+ if (onClose) {
29
+ onClose();
30
+ }
31
+ }}
32
+ width="400px"
33
+ cancelDrag=".item-container-body, #shortcuts_list"
34
+ onPositionChange={({ x, y }) => {
35
+ if (onPositionChange) {
36
+ onPositionChange({ x, y });
37
+ }
38
+ }}
39
+ onOutsideClick={onOutsideClick}
40
+ initialPosition={initialPosition}
41
+ >
42
+ {children}
43
+ </DraggableContainer>
44
+ );
45
+ };
@@ -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
+ `;