I've set up the darkmode best practices on my PWA.
When I add in the Dark Mode Opt Out switch - only some of my VueTinySlider VueMaterial cards are updated to my theme. The last card is not updated, and remains white.
Here is how I'm getting and setting darkmode with vue:
darkmode: {
get() {
return this.$store.state.darkmode;
},
set() {
this.$store.commit('toggleDarkmode');
}
}
I'm using:
VueTinySlider - v0.1.35
VueMaterial - v1.0.0-beta-11
What am I doing wrong?
I expect all cards to be updated to match the theme applied.
Oh, I came across this issue. It seems like there might be a bug in VueTinySlider when loop=true
When designing darkmode for my PWA. I ended up hooking into the updated hook in Vue.
You can check it out the API here: https://v2.vuejs.org/v2/api/#updated
I updated my Card.vue component to update the cards style and apply the correct theme. This should work:
updated() {
const currentTheme = this.darkmode ? 'dark' : 'light'
const oldTheme = this.darkmode ? 'light' : 'dark'
if (this.$refs.tinySlider) {
const cards = this.$refs.tinySlider.$el.getElementsByClassName(`md-card md-theme-${oldTheme}`)
while (cards.length > 0) {
for (let card of cards) {
card.classList.remove(`md-theme-${oldTheme}`)
card.classList.add(`md-theme-${currentTheme}`)
}
}
}
},
Related
I try to recreate the ellipsis components in naive-ui css library for vue3, here are the source code and demo codesandbox
https://github.com/tusen-ai/naive-ui/blob/main/src/ellipsis/src/Ellipsis.tsx
https://codesandbox.io/s/pne1kq
I spent a lot of time watching the source code, for now I figure out most of the source code.
But one thing I can't trace is where
s the logic they judge how long should make the tooltip appeared and make the text to have ... at the end.
Can someone help trace which part the logic exist in the above link ?
The ... is set through style declarations on the parent element. Look at the computed property ellipsisStyleRef, particularly where the value of textOverflow is set (line 66):
export default defineComponent({
...
setup (props, { slots, attrs }) {
...
const ellipsisStyleRef = computed(() => {
const { lineClamp } = props
const { value: expanded } = expandedRef
if (lineClamp !== undefined) {
return {
textOverflow: '',
'-webkit-line-clamp': expanded ? '' : lineClamp
}
} else {
return {
textOverflow: expanded ? '' : 'ellipsis', // <------------- here
'-webkit-line-clamp': ''
}
}
})
As to length, I am not sure if you mean width or duration. But it looks like there is no duration, the tooltip is shown as long as mouse hovers over trigger, and width does not seem to be restricted.
LayoutAnimation not working on android
I didn't find any issues like this, and these errors are not found in google)
"react-native": "0.67.4"
I try to use LayoutAnimation, my code looks like this:
constructor(props) {
super(props)
this.state = {
height: Dimensions.get('window').height,
sliderTopPosition: Dimensions.get('window').height/2-50
}
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
kbShow = (event) => {
LayoutAnimation.configureNext(LayoutAnimation.create(
event.duration,
LayoutAnimation.Types[event.easing] //'keyboard'
// LayoutAnimation.Types.easeInEaseOut
), () => {
// console.log(finish, 'finish')
}, () => {
console.log('KEYBOARD SHOW ANIMATION DID FAIL')
})
this.setState({
height: event.endCoordinates.screenY,
sliderTopPosition: this.state.sliderTopPosition-event.endCoordinates.height+150,
})
}
And it works fine on iOS, but if I try to run this code on android I get an error:
Unsupported interpolation type : keyboard
Ok, I replace this strings like this just for test:
//LayoutAnimation.Types[event.easing] //'keyboard'
LayoutAnimation.Types.easeInEaseOut
It still works on ios but not on android
And now error is like this:
Invalid layout animation : {NativeMap: {"type": easeInEaseOut}}
And no matter what type of easing I use it always throw this error
To make it work on Android, you need to supply a property:
LayoutAnimation.configureNext(LayoutAnimation.create(
event.duration,
LayoutAnimation.Types[event.easing],
'opacity'
)
The property can be either 'opacity', 'scaleX', 'scaleY' or 'scaleXY'.
It's a very misleading error message and the type checking should show that the property is required...
How to achieve 2 way data binding for input in dojo 2?
handleChange = (e) => {
this.setState({ textValue: e.target.value });}
<Input name='title' defaultValue={this.state.textValue} placeholder='title...' onChange={this.handleChange} />
I know this is how we do in React but don't know how to achieve in dojo 2.
In fact React supports only one-way binding, and your example illustrates it well. You need to update state, to re-render react component.
And as far as I understood from dojo2 docs and tutorials, there is almost same approach under the hood. Take a look here
Dojo 2 is built around unidirectional, top-down property propagation where it is the parent widget’s job to pass properties down to its children. In fact, a child widget has no direct reference to a parent widget! When a property changes, widgets are re-rendered (using an efficient virtual DOM) to reflect the updated state.
And it may look like this:
private _addWorker() {
this._workerData = this._workerData.concat(this._newWorker);
this._newWorker = {};
this.invalidate();
}
You change data and call invalidate() to re-render widget.
This is the solution to achieve 2 way data binding in Dojo 2.
InputWidget:-
interface IInputProps {
value: string;
onChange(event: Event): void;
}
export class InputWidget extends WidgetBase<IInputProps> {
private _onChange (event: Event) {
event.stopPropagation();
this.properties.onChange && this.properties.onChange((event.target as HTMLInputElement).value);
}
protected render(): DNode {
const { value } = this.properties;
return v('input', {
key: "input",
type: "text",
value
onchange: this._onChange
});
}
}
InputWrapper widget:-
export class InputWrapper extends WidgetBase<IWrapperProps> {
private inputValue: string = '';
protected inputValueChanges(value: string) {
this.inputValue = value;
this.invalidate();
}
protected render(): DNode {
<div>
{w(InputWidget, {onchange: this.inputValueChanges, value: this.inputValue })}
<span>Input Value:- {this.inputValue}</span>
</div>
}
}
This is the solution to achieve 2 way data binding in Dojo 2.
Hope this will be helpful! :(
I want to border margin of of screen S on phone and tablet to be different. There are variants for tablet landscape and portrait mode.
How to create different margin dimension for the variants on phone, tablet portrait, tablet landscape ?
For those curious how to do on Android , we just create some resource files at the right folder :
values for default
values-sw600dp for tablet default
values-sw600dp-land for tablet landscape
The other answers have already addressed the screen detection task. However, there is still the issue of detecting if the code is running on a Tablet device. You can detect that using the react-native-device-info package, in particular its isTablet method. So, as an example, in your component:
constructor(){
super();
this.state = {orientation: 'UNKNOWN'}
this._onOrientationChanged = this._onOrientationChanged.bind(this);
}
_onOrientationChanged(orientation){
this._setState({orientation})
}
componentDidMount(){
Orientation.addOrientationListener(this._onOrientationChanged);
}
componentWillUnmount(){
Orientation.removeOrientationListener(this._orientationDidChange);
}
render(){
let layoutStyles;
if(DeviceInfo.isTablet()){
layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeTabletStyle : portraitTabletLandscape; // Basic example, this might get more complex if you account for UNKNOWN or PORTRAITUPSIDEDOWN
}else{
layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeStyle : portraitLandscape;
}
render(){
<View style={[styles.container, layoutStyles]} // And so on...
}
}
Note that the state holds the UNKNOWN value on the beginning. Have a look at the getInitialOrientation() of the package function. I am intentionally leaving that bit out because it simply reads a property that is set when the JS code loads, and I am not sure if that satisfies your usecase (i.e. this is not your first screen). What I usually like to do is store the rotation value in a redux store (where I initialize the orientation value to that of getInitialOrientation() and then subscribe only once to the orientation listener).
I think this library will be helpful for you: https://github.com/yamill/react-native-orientation
You can do something like that with it:
Orientation.getOrientation((err,orientation)=> {
console.log("Current Device Orientation: ", orientation);
if(orientation === 'LANDSCAPE') {
//do stuff
} else {
//do other stuff
}
});
// Extract from the root element in our app's index.js
class App extends Component {
_onLayout = event => this.props.appLayout(event.nativeEvent.layout);
render() {
return (
<View onLayout={this._onLayout}>
{/* Subviews... */}
</View>
);
}
}
export const SET_ORIENTATION = 'deviceStatus/SET_ORIENTATION';
export function appLayout(event: {width:number, height:number}):StoreAction {
const { width, height } = event;
const orientation = (width > height) ? 'LANDSCAPE' : 'PORTRAIT';
return { type: SET_ORIENTATION, payload: orientation };
}
Code Copied from Here
hai i am trying to move the view up when keyboard as shown using react-native,I followed the #sherlock's comment in (How to auto-slide the window out from behind keyboard when TextInput has focus? i got an error like this
I don't know how to resolve this error, can any one help me how to resolve this, any help much appreciated.
There's a great discussion about this in the react-native github issues
https://github.com/facebook/react-native/issues/3195#issuecomment-147427391
I'd start there, but here are a couple more links you may find useful, one of which is mentioned already in the article you referenced...
[React Tips] Responding to the keyboard with React Native
Andr3wHur5t/react-native-keyboard-spacer
In my library "react-native-form-generator" (https://github.com/MichaelCereda/react-native-form-generator) i did the following.
I created a Keyboard Aware scroll view (partially modified from https://github.com/facebook/react-native/issues/3195#issuecomment-146518331)
the following it's just an excerpt
export class KeyboardAwareScrollView extends React.Component {
constructor (props) {
super(props)
this.state = {
keyboardSpace: 0,
}
this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
}
updateKeyboardSpace (frames) {
let coordinatesHeight = frames.endCoordinates.height;
const keyboardSpace = (this.props.viewIsInsideTabBar) ? coordinatesHeight - 49 : coordinatesHeight
this.setState({
keyboardSpace: keyboardSpace,
})
}
resetKeyboardSpace () {
this.setState({
keyboardSpace: 0,
})
}
componentDidMount () {
// Keyboard events
DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
}
componentWillUnmount () {
DeviceEventEmitter.removeAllListeners('keyboardWillShow')
DeviceEventEmitter.removeAllListeners('keyboardWillHide')
}
scrollToFocusedInput (event, reactNode, extraHeight = 69) {
const scrollView = this.refs.keyboardScrollView.getScrollResponder();
setTimeout(() => {
scrollView.scrollResponderScrollNativeHandleToKeyboard(
reactNode, extraHeight, true
)
}, 220)
}
render () {
return (
<ScrollView
ref='keyboardScrollView'
keyboardDismissMode='interactive'
contentInset={{bottom: this.state.keyboardSpace}}
showsVerticalScrollIndicator={true}
style={this.props.style}>
{this.props.children}
</ScrollView>
)
}
Then i use it like any other scrollview
import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
<KeyboardAwareScrollView ref='scroll'>
<Form ref='registrationForm'
onFocus={this.handleFormFocus.bind(this)}
onChange={this.handleFormChange.bind(this)}
label="Personal Information">
........
</Form>
</KeyboardAwareScrollView>
on change my component (Form) will call scrollToFocusedInput in KeyboardAwareScrollView (using the ref).
i suggest to check the code of my library (see the link on top), or simply use it (everything it's already tested and working).
If you have further questions just comment