@rpg-engine/long-bow 0.3.69 → 0.3.71

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