playbook_ui 13.32.0.pre.alpha.play1416movealiaslogic3266 → 13.32.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +37 -6
- data/app/pb_kits/playbook/pb_icon/icon.rb +3 -11
- data/app/pb_kits/playbook/pb_icon/icon_aliases.json +39 -0
- data/dist/menu.yml +1 -1
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +2 -2
- metadata +6 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 15c98ab4c24f31f753052d92ce96169c82221a5a1b94a6d73f26f39605507324
|
4
|
+
data.tar.gz: a132e4e59aafc142e919af50b3ced4622e9073e39c1e8d5183a4484a91a72e51
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 51ae3a858325d45b791b217debbff7ac11d9304ced1606a1f037af3329345d293582583ef31c9298143f5e5befa1ff203a90e6a751f127f5ab600eb363c54146
|
7
|
+
data.tar.gz: c154c881d29dcccecdcfd90638eb619b48747fd2f172f3b136c9ba30686e8bd7e726e6265b06e65e4348df5a9f8d1f6e1d98d79fcfcac334721fd2d9703c6fb9
|
@@ -3,6 +3,7 @@ import classnames from 'classnames'
|
|
3
3
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
import { isValidEmoji } from '../utilities/validEmojiChecker'
|
6
|
+
import aliasesJson from './icon_aliases.json'
|
6
7
|
|
7
8
|
export type IconSizes = "lg"
|
8
9
|
| "xs"
|
@@ -40,6 +41,19 @@ type IconProps = {
|
|
40
41
|
spin?: boolean,
|
41
42
|
} & GlobalProps
|
42
43
|
|
44
|
+
type AliasType = string | string[];
|
45
|
+
|
46
|
+
interface Aliases {
|
47
|
+
[key: string]: AliasType;
|
48
|
+
}
|
49
|
+
|
50
|
+
interface AliasesJson {
|
51
|
+
aliases: Aliases;
|
52
|
+
}
|
53
|
+
|
54
|
+
const aliases: AliasesJson = aliasesJson;
|
55
|
+
|
56
|
+
|
43
57
|
const flipMap = {
|
44
58
|
horizontal: 'fa-flip-horizontal',
|
45
59
|
vertical: 'fa-flip-vertical',
|
@@ -52,6 +66,22 @@ declare global {
|
|
52
66
|
var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
|
53
67
|
}
|
54
68
|
|
69
|
+
// Resolve alias function
|
70
|
+
const resolveAlias = (icon: string): string => {
|
71
|
+
const alias = aliases.aliases[icon];
|
72
|
+
|
73
|
+
if (alias) {
|
74
|
+
if (Array.isArray(alias)) {
|
75
|
+
return alias[0];
|
76
|
+
} else {
|
77
|
+
return alias;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
return icon;
|
82
|
+
};
|
83
|
+
|
84
|
+
|
55
85
|
const Icon = (props: IconProps) => {
|
56
86
|
const {
|
57
87
|
aria = {},
|
@@ -74,7 +104,8 @@ const Icon = (props: IconProps) => {
|
|
74
104
|
spin = false,
|
75
105
|
} = props
|
76
106
|
|
77
|
-
|
107
|
+
const resolvedIcon = resolveAlias(icon as string)
|
108
|
+
let iconElement: ReactSVGElement | null = typeof(resolvedIcon) === "object" ? resolvedIcon : null
|
78
109
|
|
79
110
|
const faClasses = {
|
80
111
|
'fa-border': border,
|
@@ -90,12 +121,12 @@ const Icon = (props: IconProps) => {
|
|
90
121
|
|
91
122
|
if (!customIcon && !iconElement) {
|
92
123
|
const PowerIcon: React.FunctionComponent<any> | undefined =
|
93
|
-
window.PB_ICONS ? window.PB_ICONS[
|
124
|
+
window.PB_ICONS ? window.PB_ICONS[resolvedIcon as string] : null
|
94
125
|
|
95
126
|
if (PowerIcon) {
|
96
127
|
iconElement = <PowerIcon /> as ReactSVGElement
|
97
128
|
} else {
|
98
|
-
faClasses[`fa-${
|
129
|
+
faClasses[`fa-${resolvedIcon}`] = resolvedIcon as string
|
99
130
|
}
|
100
131
|
}
|
101
132
|
|
@@ -115,7 +146,7 @@ const Icon = (props: IconProps) => {
|
|
115
146
|
className
|
116
147
|
)
|
117
148
|
|
118
|
-
aria.label ? null : aria.label = `${
|
149
|
+
aria.label ? null : aria.label = `${resolvedIcon} icon`
|
119
150
|
const ariaProps: {[key: string]: any} = buildAriaProps(aria)
|
120
151
|
const dataProps: {[key: string]: any} = buildDataProps(data)
|
121
152
|
const htmlProps = buildHtmlProps(htmlOptions)
|
@@ -137,7 +168,7 @@ const Icon = (props: IconProps) => {
|
|
137
168
|
}
|
138
169
|
</>
|
139
170
|
)
|
140
|
-
else if (isValidEmoji(
|
171
|
+
else if (isValidEmoji(resolvedIcon as string))
|
141
172
|
return (
|
142
173
|
<>
|
143
174
|
<span
|
@@ -146,7 +177,7 @@ const Icon = (props: IconProps) => {
|
|
146
177
|
className={classesEmoji}
|
147
178
|
id={id}
|
148
179
|
>
|
149
|
-
{
|
180
|
+
{resolvedIcon}
|
150
181
|
</span>
|
151
182
|
</>
|
152
183
|
)
|
@@ -39,6 +39,8 @@ module Playbook
|
|
39
39
|
prop :spin, type: Playbook::Props::Boolean,
|
40
40
|
default: false
|
41
41
|
|
42
|
+
ALIASES = JSON.parse(File.read(Playbook::Engine.root.join("app/pb_kits/playbook/pb_icon/icon_aliases.json")))["aliases"].freeze
|
43
|
+
|
42
44
|
def valid_emoji?
|
43
45
|
emoji_regex = /\p{Emoji}/
|
44
46
|
emoji_regex.match?(icon)
|
@@ -80,14 +82,6 @@ module Playbook
|
|
80
82
|
)
|
81
83
|
end
|
82
84
|
|
83
|
-
def icon_alias_map
|
84
|
-
return unless Rails.application.config.respond_to?(:icon_alias_path)
|
85
|
-
|
86
|
-
base_path = Rails.application.config.icon_alias_path
|
87
|
-
json = File.read(Rails.root.join(base_path))
|
88
|
-
JSON.parse(json)["aliases"].freeze
|
89
|
-
end
|
90
|
-
|
91
85
|
def asset_path
|
92
86
|
return unless Rails.application.config.respond_to?(:icon_path)
|
93
87
|
|
@@ -117,9 +111,7 @@ module Playbook
|
|
117
111
|
private
|
118
112
|
|
119
113
|
def resolve_alias(icon)
|
120
|
-
|
121
|
-
|
122
|
-
aliases = icon_alias_map[icon]
|
114
|
+
aliases = ALIASES[icon]
|
123
115
|
return icon unless aliases
|
124
116
|
|
125
117
|
if aliases.is_a?(Array)
|
@@ -0,0 +1,39 @@
|
|
1
|
+
{
|
2
|
+
"aliases": {
|
3
|
+
"arrow-alt-circle-right": "circle-right",
|
4
|
+
"angles-down": "angle-double-down",
|
5
|
+
"arrow-alt-down": "down",
|
6
|
+
"arrow-alt-up": "up",
|
7
|
+
"arrow-right-long": "long-arrow-right",
|
8
|
+
"arrow-to-bottom": "arrow-down-to-line",
|
9
|
+
"arrows-h": "arrows-left-right",
|
10
|
+
"calendar-days": "calendar-alt",
|
11
|
+
"circle-arrow-right": "arrow-circle-right",
|
12
|
+
"clock-rotate-left": "history",
|
13
|
+
"close": [
|
14
|
+
"times",
|
15
|
+
"xmark"
|
16
|
+
],
|
17
|
+
"ellipsis-h": "ellipsis",
|
18
|
+
"exclamation-circle": "circle-exclamation",
|
19
|
+
"external-link": "arrow-up-right-from-square",
|
20
|
+
"file-lines": "file-alt",
|
21
|
+
"gear": "cog",
|
22
|
+
"home": "house",
|
23
|
+
"info-circle": "circle-info",
|
24
|
+
"map-o": "map",
|
25
|
+
"message": "comment-alt",
|
26
|
+
"minus-circle": "circle-minus",
|
27
|
+
"money": "money-bill",
|
28
|
+
"mouse-pointer": "arrow-pointer",
|
29
|
+
"nitro": "nitro-n",
|
30
|
+
"play-circle": "circle-play",
|
31
|
+
"plus-circle": "circle-plus",
|
32
|
+
"plus-square": "square-plus",
|
33
|
+
"powergon": "powergon-p",
|
34
|
+
"question-circle": "circle-question",
|
35
|
+
"roofing": "product-roofing",
|
36
|
+
"shelves": "inventory",
|
37
|
+
"th-list": "table-list"
|
38
|
+
}
|
39
|
+
}
|