Skip to content

Commit f7c0bd1

Browse files
gitbrentgitbrent
committed
initial checkin
1 parent 0a316f1 commit f7c0bd1

File tree

3 files changed

+349
-0
lines changed

3 files changed

+349
-0
lines changed

‎src/bootstrap-switch-button.tsx‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
/*\
2+
|*| :: Bootstrap Switch Button ::
3+
|*|
4+
|*| Dream Journal App - Record and Search Daily Dream Entries
5+
|*| https://github.com/gitbrent/bootstrap-switch-button-react
6+
|*|
7+
|*| This library is released under the MIT Public License (MIT)
8+
|*|
9+
|*| Dream Journal App (C) 2019-present Brent Ely (https://github.com/gitbrent)
10+
|*|
11+
|*| Permission is hereby granted, free of charge, to any person obtaining a copy
12+
|*| of this software and associated documentation files (the "Software"), to deal
13+
|*| in the Software without restriction, including without limitation the rights
14+
|*| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15+
|*| copies of the Software, and to permit persons to whom the Software is
16+
|*| furnished to do so, subject to the following conditions:
17+
|*|
18+
|*| The above copyright notice and this permission notice shall be included in all
19+
|*| copies or substantial portions of the Software.
20+
|*|
21+
|*| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22+
|*| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23+
|*| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24+
|*| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25+
|*| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26+
|*| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27+
|*| SOFTWARE.
28+
\*/
29+
30+
import React from 'react'
31+
import './style.css'
32+
33+
export default class BootstrapSwitchButton extends React.Component<
34+
{
35+
onChange?: Function
36+
enable?: Function
37+
toggle?: Function
38+
// TODO: add `on` and `off` too so they can be set via code
39+
// TODO: implemnt willRecvProps or whatever so these 3 work ^^^
40+
41+
checked?: boolean
42+
disabled?: boolean
43+
onlabel?: string
44+
onstyle?: string
45+
offlabel?: string
46+
offstyle?: string
47+
size?: string
48+
style?: string
49+
width?: number
50+
height?: number
51+
},
52+
{
53+
checked: boolean
54+
disabled: boolean
55+
onlabel: string
56+
onstyle: string
57+
offlabel: string
58+
offstyle: string
59+
size: string
60+
style: string
61+
width: number
62+
height: number
63+
}
64+
> {
65+
constructor(
66+
props: Readonly<{
67+
toggle?: Function
68+
69+
checked?: boolean
70+
disabled?: boolean
71+
onlabel?: string
72+
onstyle?: string
73+
offlabel?: string
74+
offstyle?: string
75+
size?: string
76+
style?: string
77+
width?: number
78+
height?: number
79+
}>
80+
) {
81+
super(props)
82+
83+
this.state = {
84+
checked: this.props.checked || true,
85+
disabled: this.props.disabled || false,
86+
onlabel: this.props.onlabel || 'On',
87+
onstyle: this.props.onstyle || 'primary',
88+
offlabel: this.props.offlabel || 'Off',
89+
offstyle: this.props.offstyle || 'light',
90+
size: this.props.size || '',
91+
style: this.props.style || '',
92+
width: this.props.width || null,
93+
height: this.props.height || null,
94+
}
95+
}
96+
97+
toggle = event => {
98+
if (this.state.checked) this.off()
99+
else this.on()
100+
}
101+
off = () => {
102+
if (!this.state.disabled) {
103+
this.setState({
104+
checked: false,
105+
})
106+
if (this.props.onChange) this.props.onChange(this.state.checked)
107+
}
108+
}
109+
on = () => {
110+
if (!this.state.disabled) {
111+
this.setState({
112+
checked: true,
113+
})
114+
/*
115+
this.state.classList.remove( 'btn-'+this.options.offstyle );
116+
this.state.classList.add( 'btn-'+this.options.onstyle );
117+
this.state.classList.remove( 'off' );
118+
this.state.checked = true
119+
*/
120+
if (this.props.onChange) this.props.onChange(this.state.checked)
121+
}
122+
}
123+
enable = () => {
124+
this.setState({
125+
disabled: false,
126+
})
127+
}
128+
disable = () => {
129+
this.setState({
130+
disabled: true,
131+
})
132+
}
133+
134+
calcH = el => {
135+
const styles = window.getComputedStyle(el)
136+
const height = el.offsetHeight
137+
const borderTopWidth = parseFloat(styles.borderTopWidth)
138+
const borderBottomWidth = parseFloat(styles.borderBottomWidth)
139+
const paddingTop = parseFloat(styles.paddingTop)
140+
const paddingBottom = parseFloat(styles.paddingBottom)
141+
142+
//return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom
143+
// TODO: set new state, then have button use height style on re-render?
144+
}
145+
146+
// style={{ width: '81.875px', height: '48px' }}>
147+
render() {
148+
let style = {}
149+
this.props.width ? (style['width'] = this.props.width + 'px') : null
150+
this.props.height ? (style['height'] = this.props.height + 'px') : null
151+
152+
return (
153+
<div
154+
className={
155+
'switch btn ' +
156+
(this.state.checked ? 'on btn-' + this.state.onstyle : 'off btn-' + this.state.offstyle) +
157+
(this.state.size ? ' btn-' + this.state.size : '') +
158+
(this.state.style ? ' ' + this.state.style : '')
159+
}
160+
style={style}
161+
onClick={this.toggle}
162+
onTouchStart={this.toggle}>
163+
<div className='switch-group'>
164+
<label
165+
className={
166+
'switch-on btn btn-' +
167+
this.state.onstyle +
168+
(this.state.size ? ' btn-' + this.state.size : '')
169+
}>
170+
{this.state.onlabel}
171+
</label>
172+
<label
173+
className={
174+
'switch-off btn btn-' +
175+
this.state.offstyle +
176+
(this.state.size ? ' btn-' + this.state.size : '')
177+
}>
178+
{this.state.offlabel}
179+
</label>
180+
<span
181+
className={'switch-handle btn btn-light' + (this.state.size ? 'btn-' + this.state.size : '')}
182+
/>
183+
</div>
184+
</div>
185+
)
186+
}
187+
188+
/* TODO:
189+
if ( this.options.height ) {
190+
switchOn.style.lineHeight = calcH(switchOn)+'px';
191+
switchOff.style.lineHeight = calcH(switchOff)+'px';
192+
}
193+
*/
194+
}

‎src/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/*\
2+
|*| ========================================================================
3+
|*| Bootstrap Switch Button: bootstrap-switch-button.css v1.0.0
4+
|*| https://gitbrent.github.io/bootstrap-switch-button/
5+
|*| ========================================================================
6+
|*| Copyright 2018-2019 Brent Ely
7+
|*| Licensed under MIT
8+
|*| ========================================================================
9+
\*/
10+
11+
.btn-group-xs > .btn, .btn-xs {
12+
padding: .35rem .4rem .25rem .4rem;
13+
font-size: .875rem;
14+
line-height: .5;
15+
border-radius: .2rem;
16+
}
17+
18+
.checkbox label .switch, .checkbox-inline .switch {
19+
margin-left: -1.25rem;
20+
margin-right: .35rem;
21+
}
22+
23+
.switch {
24+
position: relative;
25+
overflow: hidden;
26+
}
27+
.switch.btn.btn-light, .switch.btn.btn-outline-light {
28+
border-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */
29+
}
30+
.switch input[type="checkbox"] {
31+
display: none;
32+
}
33+
.switch-group {
34+
position: absolute;
35+
width: 200%;
36+
top: 0;
37+
bottom: 0;
38+
left: 0;
39+
transition: left 0.35s;
40+
-webkit-transition: left 0.35s;
41+
-moz-user-select: none;
42+
-webkit-user-select: none;
43+
}
44+
.switch.off .switch-group {
45+
left: -100%;
46+
}
47+
.switch-on {
48+
position: absolute;
49+
top: 0;
50+
bottom: 0;
51+
left: 0;
52+
right: 50%;
53+
margin: 0;
54+
border: 0;
55+
border-radius: 0;
56+
}
57+
.switch-off {
58+
position: absolute;
59+
top: 0;
60+
bottom: 0;
61+
left: 50%;
62+
right: 0;
63+
margin: 0;
64+
border: 0;
65+
border-radius: 0;
66+
box-shadow: none;
67+
}
68+
.switch-handle {
69+
position: relative;
70+
margin: 0 auto;
71+
padding-top: 0px;
72+
padding-bottom: 0px;
73+
height: 100%;
74+
width: 0px;
75+
border-width: 0 1px;
76+
background-color: #fff;
77+
}
78+
79+
.switch.btn-outline-primary .switch-handle {
80+
background-color: var(--primary);
81+
border-color: var(--primary);
82+
}
83+
.switch.btn-outline-secondary .switch-handle {
84+
background-color: var(--secondary);
85+
border-color: var(--secondary);
86+
}
87+
.switch.btn-outline-success .switch-handle {
88+
background-color: var(--success);
89+
border-color: var(--success);
90+
}
91+
.switch.btn-outline-danger .switch-handle {
92+
background-color: var(--danger);
93+
border-color: var(--danger);
94+
}
95+
.switch.btn-outline-warning .switch-handle {
96+
background-color: var(--warning);
97+
border-color: var(--warning);
98+
}
99+
.switch.btn-outline-info .switch-handle {
100+
background-color: var(--info);
101+
border-color: var(--info);
102+
}
103+
.switch.btn-outline-light .switch-handle {
104+
background-color: var(--light);
105+
border-color: var(--light);
106+
}
107+
.switch.btn-outline-dark .switch-handle {
108+
background-color: var(--dark);
109+
border-color: var(--dark);
110+
}
111+
.switch[class*="btn-outline"]:hover .switch-handle {
112+
background-color: var(--light);
113+
opacity: 0.5;
114+
}
115+
116+
/* NOTE: Must come first, so classes below override as needed */
117+
/* [default] (bootstrap-4.1.3 - .btn - h:38px) */
118+
.switch.btn { min-width: 3.7rem; min-height: 2.15rem; }
119+
.switch-on.btn { padding-right: 1.5rem; }
120+
.switch-off.btn { padding-left: 1.5rem; }
121+
122+
/* `lg` (bootstrap-4.1.3 - .btn - h:48px) */
123+
.switch.btn-lg { min-width: 5rem; min-height: 2.815rem; }
124+
.switch-on.btn-lg { padding-right: 2rem; }
125+
.switch-off.btn-lg { padding-left: 2rem; }
126+
.switch-handle.btn-lg { width: 2.5rem; }
127+
128+
/* `sm` (bootstrap-4.1.3 - .btn - h:31px) */
129+
.switch.btn-sm { min-width: 3.125rem; min-height: 1.938rem; }
130+
.switch-on.btn-sm { padding-right: 1rem; }
131+
.switch-off.btn-sm { padding-left: 1rem; }
132+
133+
/* `xs` (bootstrap-3.3 - .btn - h:22px) */
134+
.switch.btn-xs { min-width: 2.19rem; min-height: 1.375rem; }
135+
.switch-on.btn-xs { padding-right: .8rem; }
136+
.switch-off.btn-xs { padding-left: .8rem; }

‎tsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"sourceMap": true,
4+
"module": "commonjs",
5+
"esModuleInterop": true,
6+
"resolveJsonModule": true,
7+
"experimentalDecorators": true,
8+
"target": "es5",
9+
"jsx": "react",
10+
"lib": [
11+
"dom",
12+
"es6"
13+
]
14+
},
15+
"include": [
16+
"src"
17+
],
18+
"compileOnSave": false
19+
}

0 commit comments

Comments
 (0)